JSFiddle - React, Tailwind, and code Playground

by ktabarez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300"></script>
<div class="page-body">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12">
                            <div class="row">
                                <div class="col-lg-6 col-sm-6 col-xs-12">
                                    <div class="widget">
                                        <div class="widget-header">
                                            <i class="widget-icon fa fa-check"></i>
                                            <span class="widget-caption">Default Widget</span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config">
                                                    <i class="fa fa-cog"></i>
                                                </a>
                                                <a href="#" data-toggle="maximize">
                                                    <i class="fa fa-expand"></i>
                                                </a>
                                                <a href="#" data-toggle="collapse">
                                                    <i class="fa fa-minus"></i>
                                                </a>
                                                <a href="#" data-toggle="dispose">
                                                    <i class="fa fa-times"></i>
                                                </a>
                                            </div><!--Widget Buttons-->
                                        </div><!--Widget Header-->
                               ...

CSS

.page-body {
background: #eee;
padding: 18px 20px 24px;
}
 
.widget {
padding: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 3px 0 30px 0;
}

.widget-header {
position: relative;
min-height: 35px;
background: #fff;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.3);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.3);
box-shadow: 0 0 4px rgba(0,0,0,.3);
color: #555;
padding-left: 12px;
text-align: right;
}

.widget-header .widget-icon {
display: block;
width: 30px;
height: 32px;
position: relative;
float: left;
font-size: 111%;
line-height: 32px;
text-align: center;
margin-left: -10px;
}

.widget-header>.widget-caption {
line-height: 34px;
padding: 0;
margin: 0;
float: left;
text-align: left;
font-weight: 400!important;
font-size: 13px;
}

.widget-header[class*="bg-"] .widget-caption, .widget-header[class*="bg-"] i {
color: #fff;
}

.widget-header.bordered-bottom {
border-bottom: 3px solid #fff;
}

.widget-header[class*="bg-"] {
border: 0;
}

.widget.flat .widget-body, .widget.flat .widget-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.widget.radius-bordered .widget-header {
-webkit-border-radius: 3px 3px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 3px 3px 0 0;
-moz-background-clip: padding;
border-radius: 3px 3px 0 0;
background-clip: padding-box;
}

.widget.transparent .widget-header {
border-bottom: 1px solid #ccc;
}

.widget.transparent .widget-header, .widget.transparent .widget-body {
background-color: rgba(0,0,0,0);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.widget-header.lined {
border: 0;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
box-shadow: none!important;
padding-left: 2%;
}

.widget-header.lined .widget-buttons {
padding-right: 2%;
}

.widget-header.separated {
margin-bottom: 5px;
}

element.style {
}
.widget-header.lined+.widget-body {
padding-left: 2%;
padding-right: 2%;
}

.widget-header.lined .widget-buttons {
padding-right:...