JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<header class="top-header blue">
  <a href="#" class="back blue">
    Back
  </a>
  <img class="logo" src="http://jitendra.skarp.dk/projects/cb-phone/img/crowdbonus.logo.png">

  <a href="#" class="setting"></a>

</header><!-- /header -->

<div class="tab with-border">
<ul>
<li><a href="" title="">Tab 1</a></li>
<li><a href="" title="">Tab 2</a></li>
<li><a href="" title="">Tab 3</a></li>
</ul>
</div><!-- /tab-with-border -->

<div class="tab">
<ul>
<li><a href="" title="">Tab 1</a></li>
<li><a href="" title="">Tab 2</a></li>
<li><a href="" title="">Tab 3</a></li>
</ul>
</div><!-- /tab -->

<div class="label blue blue-shadow">
  Label
</div><!-- / -->

<div class="label grey grey-shadow">
  Label
</div><!-- / -->


<h2>Label</h2>

<div class="select round dark-grey dark-grey-shadow button round">
  Select
</div><!-- / -->

<div class="Drop-down dark-grey dark-grey-shadow button round">
    Drop down 
    <div class="vertical-divider">
    <span class="arrow-down "></span>
    </div>
</div><!-- / -->

<div class="Drop-down up small light-grey light-grey-shadow button round">
  Drop
</div>

<div class="Drop-down down small blue blue-shadow button round">
  Down
</div>

<div class="button blue blue-shadow round">
Button
</div><!-- / -->

<div class="button green green-shadow round">
Button
</div><!-- / -->

<div class="button light-grey light-grey-shadow round ">
Button
</div><!-- / -->

<div class="raper blue">
<div class="base">
<div class="submit button with-border blue blue-shadow round">
Submit Button
</div><!-- / -->
</div>
</div>

<div class="text-field">
Text field
</div><!-- / -->


<div class="text-area round">
Text field
  
</div><!-- / -->

<div class="text-area round">
Text field
</div><!-- / -->

<div class="text-area round">
Text field
</div><!-- / -->

<h2>Label*</h2>

<div class="selection-list">

  <div class="round-bt-rt dark-grey">Select 1 <span>Version 3</span>  </div><!-- / -->
  <div class="dark-grey">Select 2 <span>Number 7</span>  </div><!--...

CSS

body {font-family:Arial;font-size:26px; color:#ccc}
a, a:hover {text-decoration:none}

.blue {background-color:#1693da}
.blue-shadow { box-shadow: 0px 8px 0px #0c5b88}
.grey {background-color:#999999}
.grey-shadow { box-shadow: 0px 8px 0px #666}
.light-grey {background-color:#bbbbbb}
.light-grey-shadow { box-shadow: 0px 8px 0px #888888}
.dark-grey {background-color:#3a3a3a}
.dark-grey-shadow { box-shadow: 0px 8px 0px #000}
.green {background-color:#33aa00}
.green-shadow { box-shadow: 0px 8px 0px #007700}

.raper {padding:10px}

.base {  box-shadow:inset 2px 2px 6px 2px #033e63;border-radius:12px;padding:10px;padding-bottom:10px;
background:#127cba;
}

.base .button {margin:0;}

.logo {margin-top: 26px;
margin-bottom: 20px;}

header {text-align:center}
.back {
width: 149px;
display: block;
margin-top: 7px;
margin-bottom: 7px;
float: left;
color: #fff;
background: url(http://jitendra.skarp.dk/projects/cb-phone/img/back-button-bg.png);
font-weight: bold;
text-transform: uppercase;
padding-top: 22px;
padding-bottom: 21px;
padding-left: 6px;
    margin-left: 7px;}

.selection-list {margin:20px 1%}
.setting 
{
    width: 74px;
height: 74px;
display: block;
float: right;
color: 
#fff;
background: url(http://jitendra.skarp.dk/projects/cb-phone/img/icon-1.png) no-repeat center center, url(http://jitendra.skarp.dk/projects/cb-phone/img/menu-setting.png);
margin-top: 7px;
margin-bottom: 7px;
margin-right: 12px;

}

h2 {font-weight:bold; font-size:38px;color:#000}

.round {border-radius:12px}
.round-bt-rt {border-top-left-radius: 12px;
border-top-right-radius: 12px;}
.round-bl-br {border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;}
.label {font-size:34px;font-weight:bold;color:#fff;padding-left:10px;margin-bottom:8px }
.button {text-align:center;padding:20px;margin:20px 1%;
   }
.arrow-down {display:block;

width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 10px solid...