JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<h2 class="subTitle2">Getting Tickets/Where to Buy</h2>

<!-- /Row -->
<div class="content-row">
    <h3 class="intro">Capital Metro now offers a pass purchasing option for every lifestyle. Buy passes in person, or even on the go!</h3>
&#160;</div>
<!-- /Row -->
<div class="row">
    <h2>Where to buy fares</h2>

    <hr class="sep" />
    <div class="col-1">
        <h3>CapMetro App</h3>

        <p>Purchase fares for all services using the CapMetro App! Easy activate and use on the go with any Apple, Android or Windows mobile device. Check capmetro.org/app for more information.</p>
    </div>
    <div class="col-2">
        <img class="right" src="http://stage.capmetro.org/uploadedImages/Capmetroorg/Business/MetroWorks/metroworks-home-image1.png" />&#160;</div>
</div>
<hr class="sep" />
<!-- /Row -->
<div class="content-row">
    <h3 class="section-title">Online</h3>

    <div class="col-1">
        <p>Capital Metro now offers you two online options to easily view and buy passes.
            <br />&#160;</p>
        <ol>
            <li>Order paper tickets using Capital Metro’s online store and receive in the mail within five business days. Fares available online are: 7-Day Passes, 31-Day Passes, Reduced Fare 31-Day Passes, Stored Value Cards and MetroAccess Passes.</li>
            <li>Buy tickets for the CapMetro App using the online portal. Purchase passes for Local, Premium, Commuter and MetroAccess Services from the convenience of your desktop or laptop computer. Tickets are added instantly to your mobile account!</li>
        </ol>
        <p>&#160;</p>
    </div>
    <div class="col-2">
        <img class="right" src="http://stage.capmetro.org/uploadedImages/Capmetroorg/Business/MetroWorks/metroworks-home-image1.png" />&#160;</div>
</div>
<hr class="sep" />
<!-- /Row -->
<div class="content-row">
    <div class="col-1">
        <h3 class="section-title">Retail Outlets</h3>

        <p>Buy your Capital Metro passes at dozens of convenient retail outlets...

CSS

.content-row, .col-1, .col-2 {
    float:left;
}
.col-1, .col-2 {
    width:49%;
    display:inline-block;
    v-align:top;
}
img.left {
    float: left;
    margin: 0 20px 20px 0;
}
img.right {
    float: right;
    margin: 0 0 20px 20px;
}
h2.subTitle2 {
    font-size: 1.5em;
    padding: 0px;
    margin: 0px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgb(255, 184, 25);
    margin-bottom:20px;
}
/*lightbox*/
 .lightBox.fares {
    margin: 20px;
    float: right;
    text-align:center;
    width:250px;
    height:170px
}
.lightBox.fares a#allStores.fancybox {
    padding: 2px;
    display: block;
    background: #000000;
    color: #fff;
    margin-bottom: 0px;
}
.lightBox.fares #lightBoxInner {
    height:249px;
    height:149px;
    overflow:hidden;
}
.lightBox.fares #lightBoxInner img {
    width:100%;
    /* Webkit for Chrome and Safari */
    -webkit-transform: scale(1, 1);
    // This is the scale for the normal size of the image. -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    /* Webkit for Mozila Firefox */
    -moz-transform: scale(1, 1);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;
    /* Webkit for IE( Version: 11, 10 ) */
    -ms-transform: scale(1, 1);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
}
.lightBox.fares #lightBoxInner img:hover {
    /* Webkit for Chrome and Safari */
    -webkit-transform: scale(1.2, 1.2);
    // This is the enlarged size scale of the image. -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    /* Webkit for Mozila Firefox */
    -moz-transform: scale(1.2, 1.2);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;
    /* Webkit for IE( Version: 11, 10 ) */
    -ms-transform: scale(1.20, 1.20);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
}