JSFiddle - React, Tailwind, and code Playground

by xtian

HTML

<div class="wrap">
                <div class="quick-guide-steps">
                    <img src="http://demo.omnigon.com/christian_bovine/goals/img/instr_img1.png" alt="PlayUp"/>
                    <div class="quick-quide-steps-right" class="left">
                        <div class="quick-guide-steps-top">
                            <h1 class="left">Step 1</h1> <h3>Start a New Game</h3>
                            <img src="http://demo.omnigon.com/christian_bovine/goals/img/qGuide-lct.png" alt=""/>
                        </div>
                        <div class="quick-guide-steps-bottom step1">
                            <ol class="quick-steps">
                                <li><p class="num">1</p><p class="step-copy">Press the "Start a New Game" button</p></li>
                                <li><p class="num">2</p><p class="step-copy">If you are not logged in, you will be prompted to login</p></li>
                                <li><p class="num">3</p><p class="step-copy">If you are not registered, you will be prompted to create a new account</p></li>
                            </ol>
                        </div>
                    <div class="quick-guide-steps-bottom-corner"></div>
                    </div>
                </div>
</div>

CSS

.wrap .quick-guide-steps{
    width: 100%;
    float:left;
    margin:0 0 18px 0;
}

.wrap .quick-guide-steps img{
    float:left;
    width:225px;
    height: auto;
}

.wrap .quick-quide-steps-right{
    float:left;
    width:712px;
    color:#fff;
}

.wrap .quick-guide-steps-top{
    background-color: #0d131b;
    float:left;
    width:695px;
    position: relative;
    height: 12px;
    padding: 12px 5px 10px 10px;
}

.wrap .quick-guide-steps-top h1{
    color:#27C9FB;
    font-size: 13px;
    margin-right: 10px;
}

.wrap .quick-quide-steps-right .quick-guide-steps-top img{
    float:right;
    width: 6px;
    height: 34px;
    position: relative;
    bottom:37px;
    right:-11px;
}

.wrap .quick-guide-steps-top h3{
    font-size:13px;
}

.wrap .quick-guide-steps-bottom{
    background-color: #131b27;
    float:left;
    width:695px;
    position: relative;
    height: 61px;
    padding: 8px 11px 8px 10px;
}

.wrap .quick-guide-steps-bottom.step1{
    height: 72px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.step2{
    height: 73px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.step3{
    height: 134px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.step4{
    height: 134px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.step5{
    height: 74px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.step6{
    height: 42px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.step7{
    height: 42px;
    padding: 21px 11px 18px 10px
}

.wrap .quick-guide-steps-bottom.last{
    height: 63px;
    padding: 13px 11px 11px 10px;
}

.wrap .quick-guide-steps .quick-quide-steps-right .quick-guide-steps-bottom-corner{
    background-color: #131b27;
    float:left;
    height: 7px;
    width:715px;
    background: url(http://demo.omnigon.com/christian_bovine/goals/img/qGuide-bottom.png) bottom right no-repeat;
}
.wrap .quick-quide-steps-right...