JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div id="container">
    
    <p>&nbsp;</p><p>&nbsp;</p>
        
    <div class="content">
    
<div class="dropbutton">
    <div class="blue">
            <img src="http://iwantaneff.in/t/arrow.png" />
    </div>
    <div class="green">
            <a href="#">Download now!</a>
    </div>
    <div class="dark">
        <img src="http://iwantaneff.in/t/file.png" />
        Version 3.0 <br />
        <span>255 MB</span>
    </div>
</div>

<div class="dropbutton">
    <div class="black">
            <img src="http://iwantaneff.in/t/arrow.png" />
    </div>
    <div class="orange">
            <a href="#">Download now!</a>
    </div>
    <div class="light">
        <img src="http://iwantaneff.in/t/box.png" />
        ZIP File <br />
        <span>25 KB</span>
    </div>
</div>

<div class="dropbutton">
    <div class="purple">
            <img src="http://iwantaneff.in/t/arrow_black.png" />
    </div>
    <div class="yellow">
            <a href="#">Try it now!</a>
    </div>
    <div class="dark">
        <img src="http://iwantaneff.in/t/file_red.png" />
        FREE TRIAL <br />
        <span>30 days</span>
    </div>
</div>    

<div class="dropbutton">
    <div class="grey">
            <img src="http://iwantaneff.in/t/arrow.png" />
    </div>
    <div class="grey">
            <a href="#">Download now!</a>
    </div>
    <div class="light">
        <img src="http://iwantaneff.in/t/file_blue.png" />
        Updated!<br />
        <span>version 2.3.1</span>
    </div>
</div>    

<div class="dropbutton">
    <div class="red">
            <img src="http://iwantaneff.in/t/arrow_black.png" />
    </div>
    <div class="blue">
            <a href="#">Buy it now!</a>
    </div>
    <div class="light">
        <img src="http://iwantaneff.in/t/box.png" />
        Special Offer <br />
        <span>25,99$</span>
    </div>
</div>    
    </div>
    
</div>

CSS

@import url("http://fonts.googleapis.com/css?family=Maven+Pro");

* {
    resize: none;
    border: none;
    outline: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-family: 'Maven Pro';
}

body {
    background: #c0c0c0;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 40px;
}

.dropbutton {
    /* main class */
    height: 48px;
    width: 200px;
    font: bold 16px/48px arial;
    margin-bottom: 60px;
    position: relative;
}

/* ===============================
   ========== RED STYLE ==========
   ===============================
   ================================================== */

.red:first-child {
    /* styling for the left part */
    padding: 7px;
    float: left;
    width: 32px;
    height: 32px;
    /* border radius */
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    /* backgorund */
    background: -webkit-gradient(linear, left top, left bottom, from(#ff9782), to(#d83c22));
    background: -moz-linear-gradient(#ff9782, #d83c22);
    background-color: #d83c22;
    /* shadows and highlights */
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
    /* border */
    border: 1px solid #c93f27;
}

.dropbutton:hover .red:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffbdb0), to(#ee6048));
    background: -moz-linear-gradient(#ffbdb0, #ee6048);
    background-color: #ee6048;
}

.dropbutton:active .red:first-child {
    background: -webkit-gradient(linear, left top, left bottom, from(#e75138), to(#ff7053));
    background: -moz-linear-gradient(#e75138, #ff7053);
    background-color: #ff9782;
}

.red {
    /* styling for the right part */
    height: 46px;
   ...