JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"></script>
<!-- 2 wide banners section -->
<div class="row">
    <div class="column small-12 medium-6">
        <img src="https://latam.uat.reward4d.com/media/wysiwyg/00-600x140-copec.png" alt="">
        <div class="show-for-small-only">
            <div style="height: 30px; width: 100%"></div>
        </div>
    </div>

    <div class="column small-12 medium-6">
        <img src="https://latam.uat.reward4d.com/media/wysiwyg/00-600x140-santander.png" alt="">
    </div>
</div>
<div style="height: 30px; width: 100%"></div>

<!-- 3 columns section that becomes 2 on mobile: 1 tall, 2  small -->
<div class="row">
    <div class="column small-6 medium-4">
        <div class="hide-for-small-only">
            <img src="https://latam.uat.reward4d.com/media/wysiwyg/1_2.png" style="width: 100%" alt="">
        </div>
        <div class="show-for-small-only">
            <img src="https://latam.uat.reward4d.com/media/wysiwyg/1-1_1.png" style="width: 100%" alt="">
        </div>
    </div>
    <div class="column small-6 medium-8">
        <div class="row">
            <div class="column small-12 medium-6 align-self-top">
                <img src="https://latam.uat.reward4d.com/media/wysiwyg/2_2.png" style="width: 100%" alt="">
                <div class="show-for-small-only">
                    <div style="height: 30px; width: 100%"></div>
                </div>
            </div>
            <div class="column small-12 medium-6 align-self-bottom">
                <img src="https://latam.uat.reward4d.com/media/wysiwyg/3_1.png" style="width: 100%" alt="">
            </div>
        </div>
    </div>
</div>
<div style="height: 30px; width: 100%"></div>


<!-- one columns banner - use basic markup not homepage bottom banner -->
<div class="row">
    <div class="column">
        <img...

JavaScript

$(document).foundation();