JSFiddle - React, Tailwind, and code Playground

by msturdy

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<table class="table table-striped table-condensed">
<thead>
    <tr>
        <th>#</th>
        <th>Character</th>
        <th>Level</th>
        <th>Vocation</th>
        <th>Date registered</th>
        <th>Role</th>
        <th>Status</th>
    </tr>
</thead>
<tbody> 
     
    <tr> 
    <td>         1        </td> 
<td>Zysen</td> 
<td><small class="muted">271</small></td> 
<td><small class="muted">Knight</small></td>
<td><small class="muted"><strong>1</strong> days have passed.
</small></td>
<td><small class="muted">God</small></td>
<td><span class="label label-important"> Offline</span></td>
<td>
    <div class="btn-group">
        <div class="btn-group">
            <a href="{{ URL::to('characters/'. $player->name) }}" class="btn btn-mini btn-info">View</a>
            <span class="btn" style="display:none"></span>
        </div>
        <form method="POST" action="http://localhost:8000/account/management/characters/delete/23" accept-charset="UTF-8" class="btn-group">
            <input name="_token" type="hidden" value="7GKfarNh81RKu1Y5Dts8bYeFjOG7i8bLdD0CdNLa">        
            <input name="_method" type="hidden" value="DELETE">
            <input class="btn btn-mini btn-danger" type="submit" value="Delete">            
        </form>    
    </div>
</td>
</tr> 
    <tr> 
    <td>         2        </td> 
<td>Ameyuri Ringo</td> 
<td><small class="muted">321</small></td> 
<td><small class="muted">Sorcerer</small></td>
<td><small class="muted"><strong>1</strong> days have passed.
</small></td>
<td><small class="muted">Player</small></td>
<td><span class="label label-important"> Offline</span></td>
<td>
    <div class="btn-group">
        <a class="btn btn-mini btn-info" href="http://localhost:8000/characters/Ameyuri Ringo">View</a>
       ...

CSS

.footer-post {
    
    bottom: -5px;
    right: -290px;
    position: relative
}
.footer-2 {
    
    bottom: -5px;
    right: -17px;
    position: relative
}

.center-1 {
    
    bottom: -5px;
    right: -137px;
    position: relative
}

.doc-content-box{
    position:relative;
    min-height: 1px;
    margin-bottom: 20px;
    padding: 20px;
    background: #F9F9F9;
    border: 1px solid #DDDDDD;
    border-radius: 1px;
}
.doc-content-box > ul > li{
    list-style-type: none;
}
.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th 
{
    background-color:#fff
}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-submenu:hover>a,.dropdown-submenu:focus>a{text-decoration:none;color:#ffffff;background-color:#0081c2;background-image:-moz-linear-gradient(top, #0088cc, #0077b3);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));background-image:-webkit-linear-gradient(top, #0088cc, #0077b3);background-image:-o-linear-gradient(top, #0088cc, #0077b3);background-image:linear-gradient(to bottom, #0088cc, #0077b3);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
 .btn{
    margin-left:5px;
} 
.muted {
    color: #5e6164;
}
.navbar .brand {
    display: block;
    float: left;
    padding: 10px 20px 10px;
    margin-left: -20px;
    font-size: 22px;
    font-weight: 200;
    color: #555;
    text-shadow: 0 1px 0 #F9F9F9;
}
.input-mini {
    float: right;
    padding: 0px 180px 0px;
}
.centering{
    text-align: center
}
#custom-search-form {
    margin:0;
    margin-top: 5px;
    padding: 0;
}
#custom-search-form .search-query {
    padding-right: 3px;
    padding-right: 4px \9;
    padding-left: 3px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
   ...