JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<link rel="stylesheet" href="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/css/foundation.5.min.css">
<ul class="prod-delivery">
    <li><div class="prod-detail-left"><span class="shipped-in"> </span></div><div class="prod-detail-right"><span class="prod-detail-text">	Shipped in
1 business day</span></div></li>
    <li><div class="prod-detail-left"><span class="free-home-delivery"></span></div><div class="prod-detail-right"><span class="prod-detail-text">HOME DELIVERY</span></div></li>    
    <li><div class="prod-detail-left"><span class="gift-wrap"></span></div><div class="prod-detail-right"><span class="prod-detail-text"> GIFT WRAP AVAILABLE</span></div></li>
</ul>
<a  href="#" data-reveal-id="myModal" data-reveal class="button radius">Gift Wrap Product</a>
<div id="myModal" class="reveal-modal" data-reveal>
    <form id="giftwrap_lightbox">
            <p class="mb10 pos-rel"><span class="f-bold c222">Recipient Name* </span>(Max 45 characters are allowed)<span class="giftwrap-dear pos-abs">Dear</span></p>
            <input type="text" autocorrect="off" id="giftwrap_recipientname_lightbox" value="asdsad" maxlength="45" name="rptName" class="form-text mb20">
            <p class="mb10"><span class="f-bold c222">Message </span>(Max 200 characters are allowed)</p>
            <textarea autocorrect="off" placeholder="Enter your message" id="giftwrap_message_lightbox" name="rptMsg" maxlength="200" class="form-text mb20  ">asdsdsds</textarea> 
            <p class="mb10"><span class="f-bold c222">Sender* </span>(Max 50 characters are allowed)</p>
            <input type="text" autocorrect="off" id="giftwrap_sendername_lightbox" value="asdsdsd" maxlength="50" name="sdrName" class="form-text mb20">
            <input type="button" onclick="giftWrapSubmit();
                    _gaq.push(['_trackEvent', 'giftwrap_lightbox', 'save']);"...

CSS

.prod-delivery {
    list-style-type:none;
    margin:0px;
    padding:0px;
    color:#888;
    font-size:11px;
}

.prod-delivery li {
    padding:5px 10px;
}
.prod-detail-left, .prod-detail-right {
     display:inline-block;
    width:49%;
}
.prod-detail-right {
    width:70%;
}
.prod-detail-left {
    width:29%;
}

.prod-detail-right span {
    word-wrap: break-word;
}

JavaScript

$(document).foundation();
$('.reveal-modal').on('opened', function () {
    $(window).trigger('resize');
});