Create responsive HTML+JS web page from mockups

I'm creating an iFrame-based widget to embed in blogs/news sites. I need help creating a responsive, static .html file that will display content received via JSON. Attached is desktop mockup. Working on mobile currently, will not differ drastically, but will hide a couple items and need to support swiping the horizontal list of articles. The finished product will include: HTML -Static base file that shows 'Loading...' prior to JSON arrival CSS -2 primary display styles: XS-MD (phone), MD+LG (tablet/desktop). Some small tweaks for XL display. -Hover effects for the tabs and buttons -A couple icons via fontawesome (no gif/png icons or buttons) -Droid Sans font -Shadows/gradients as shown JS -Show content based on tab selected (traffic, social, or votes) -Retrieving JSON content for template -Sliding article list on desktop when clicking right arrow -Swiping article list left/right on mobile -Expanding the 'promoted' content when the 'show more' button is clicked -JQuery is fine. Otherwise want to keep as lightweight as possible. JSON details (I will handle server side) will contain three objects, each consisting of a title, rank #, share count, vote count, and image Url. These will populate the three article tabs shown. Another JSON object for the ad will contain Title, 'sponsored by' text, description, and button text. I will provide a fixed URL endpoint for retrieving JSON. Should be completed within 48 hours. I'm online during US Eastern business hours and can return emails/messages within 8 hours outside of that window. Let me know if you have questions, and please provide examples of work like this you've created.