JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<link rel="stylesheet" href="http://dev.sometechie.com/templates/sometechie/css/template.css">
<link rel="stylesheet" href="http://dev.sometechie.com/media/com_akeebasubs/css/frontend.css">
<!-- Body -->
<div class="body">
    <div class="container">
        <!-- Header -->
        <div class="header">
            <div class="header-inner clearfix">	<a class="brand pull-left" href="/">
						<div id="brand-logo"></div>
											</a>

                <div class="header-search pull-right"></div>
            </div>
        </div>
        <div class="navigation">
            <div class="navbar navbar-static-top">
                <div class="navbar-inner">	<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						   <span class="icon-bar"></span>
						   <span class="icon-bar"></span>
						   <span class="icon-bar"></span>
						</a>

                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="item-101"><a class="" href="/">Home</a>
                            </li>
                            <li class="item-151"><a class="" href="/contact-us.html">Contact Us</a>
                            </li>
                            <li class="item-166 active dropdown parent"><a class="dropdown-toggle" href="/media-player.html">Media Player<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li class="item-184"><a class="" href="/media-player.html" title="features">Features</a>
                                    </li>
                                    <li class="item-185 current active"><a class="" href="/media-player/pricing.html">Pricing</a>
                                    </li>
                                    <li class="item-190"><a class="" href="/media-player/support.html">Support</a>
                                    </li>
                                    <li class="item-189"><a...

CSS

.akeebasubs-level-3 .akeebasubs-awesome-price, .akeebasubs-level-4 .akeebasubs-awesome-price {
    background:url(/images/player_pricing.png) no-repeat;
    height:18px
}
.akeebasubs-level-3 .akeebasubs-awesome-price {
    background-position:top
}
.akeebasubs-level-4 .akeebasubs-awesome-price {
    background-position:bottom
}
.akeebasubs-level-free .akeebasubs-awesome-image, .akeebasubs-level-3 .akeebasubs-awesome-image, .akeebasubs-level-4 .akeebasubs-awesome-image {
    text-align:center;
}
.akeebasubs-level-free .akeebasubs-awesome-image::before {
    background:url('//sometechie.com/images/media-player/withwatermark.png') top center no-repeat;
}
.akeebasubs-level-3 .akeebasubs-awesome-image::before, .akeebasubs-level-4 .akeebasubs-awesome-image::before {
    background:url('//sometechie.com/images/media-player/withoutwatermark.png') top center no-repeat;
    content:'\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
    font-size:26px;
}
.akeebasubs-level-3 .akeebasubs-awesome-body::before, .akeebasubs-level-4 .akeebasubs-awesome-body::before {
    content:'No Watermark';
}
.akeebasubs-level-free .akeebasubs-awesome-body::before, .akeebasubs-level-3 .akeebasubs-awesome-body::before, .akeebasubs-level-4 .akeebasubs-awesome-body::before {
    font-size:17px;
    line-height:50px;
    vertical-align:-25px;
}
.akeebasubs-level-free .akeebasubs-awesome-body,
.akeebasubs-level-3 .akeebasubs-awesome-body,
.akeebasubs-level-4 .akeebasubs-awesome-body{
    text-align:center;
}
.akeebasubs-level-free .akeebasubs-awesome-description,
.akeebasubs-level-3 .akeebasubs-awesome-description,
.akeebasubs-level-4 .akeebasubs-awesome-description{
    text-align:left;
}
.akeebasubs-level-3 .akeebasubs-awesome-price span, .akeebasubs-level-4 .akeebasubs-awesome-price span {
    display:none
}
@media (-webkit-min-device-pixel-ratio:1.5), (min--moz-device-pixel-ratio:1.5), (-o-min-device-pixel-ratio:3/2),...