JSFiddle - React, Tailwind, and code Playground

by codecraig

HTML

<a class="button small">Small Button</a>
<a class="button">Button</a>
<a class="button large">Large Button</a>
<a class="button xlarge">XLarge Button</a>

<br/><br/>

<a class="button small rounded">Small Button</a>
<a class="button rounded ">Button</a>
<a class="button large rounded">Large Button</a>
<a class="button xlarge rounded">XLarge Button</a>

<br/><br/>

<a class="button small secondary">Small Button</a>
<a class="button secondary">Button</a>
<a class="button large secondary">Large Button</a>
<a class="button xlarge secondary">XLarge Button</a>

<br/><br/>

<a class="button small rounded secondary">Small Button</a>
<a class="button rounded secondary">Button</a>
<a class="button large rounded secondary">Large Button</a>
<a class="button xlarge rounded secondary">XLarge Button</a>

CSS

.button {
     background: #FF9E9E; /* old browsers */background: -moz-linear-gradient(top,  #FF9E9E 0%, #cc0000 5%, #AA0000 99%); /* firefox */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9E9E),  color-stop(5%,#cc0000), color-stop(99%,#AA0000)); /* webkit */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9E9E', endColorstr='#AA0000',GradientType=0 ); /* ie */
     display: inline-block;
     padding: 10px 20px 11px;
     color: #fff !important;
     font-size: 14px;
     font-weight: bold;
     line-height: 1;
     text-decoration: none;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
     border-bottom: 1px solid rgba(0,0,0,0.25);
     position: relative;
     cursor: pointer;
     overflow: visible;
     width: auto;
     border: 1px solid #C00;
 }
 
 button::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
 .button:hover {
     background: #FF9E9E; /* old browsers */
     background: -moz-linear-gradient(top,  #FF9E9E 0%, #B20000 5%, #820000 99%); /* firefox */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF9E9E),  color-stop(5%,#B20000), color-stop(99%,#820000)); /* webkit */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF9E9E', endColorstr='#820000',GradientType=0 ); /* ie */
     color: #fff;
 }
 
 .button:active {
     -webkit-transform: translateY(1px);
     -moz-transform: translateY(1px);
 }
 
 /* Small Buttons */
 
 .small.button {
     font-size: 11px;
     padding: 5px 10px 6px;
 }
 
 /* Large Buttons */
 
 .large.button {
     font-size: 18px;
     padding: 13px 24px 14px;
 }
 
 /* XLarge Buttons */
 
 .xlarge.button {
     font-size: 24px;
     padding: 18px 49px 19px;
 }
 
 /* Secondary buttons (perfect for Cancels or other secondary actions */
 
...