JSFiddle - React, Tailwind, and code Playground

by Erno

HTML

<title>Shoppy</title>


  <body>
 <div id="wrap">
  <div class="container">
    <div class="row">
      <!--<nav class="navbar navbar-default" role="navigation">-->
        <!--<a class="navbar-brand" href="#">Stoksupply!</a>-->
      <!--</nav>-->
      <a href="/shop/">
        <div id="sslogo_image"></div>
      </a>
          <br/>
        <!---->
         <p style="margin-left:85px; color:#e36b2a;">Het beste online aanbod van kleding</p>
        <!---->
         <form action="/shop/search/" method="get" class="navbar-form" role="search">
          <div class="form-group">
            <input type="text" name="query" class="form-control" style="height:50px; font-size:18px;" placeholder="Search for products">
           </div>
          <button type="submit" class="btn btn-default" style="height:50px; width: 90px;
                                                            margin-top:-3px;
                                                            border-top-right-radius: 20px;
                                                            border-bottom-right-radius:20px;
                                                            background-color:#e36b2a ;
                                                            color:white;
                                                            border-color:none;
                                                            -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.15),0 2px 0 #e36b2a;
                                                            -moz-box-shadow: 0 2px 0 rgba(0,0,0,.15),0 2px 0 #e36b2a;
                                                            box-shadow: 0 2px 0 rgba(0,0,0,.15),0 2px 0 #e36b2a;">
              <span class="glyphicon glyphicon-search"></span></button>
        </form>
        
    <div class="col-xs-3 col-md-3">
        <h3> Categoriën</h3>
        <ul class="nav nav-pills nav-stacked">
          
            <li class="active"><a href="/shop/">Alles</a></li>
          
          
          ...

CSS

/*!
 * Bootstrap v3.0.3 (http://getbootstrap.com)
 * Copyright 2013 Twitter, Inc.
 * Licensed under http://www.apache.org/licenses/LICENSE-2.0
 */
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
#sslogo_image {
  display: inline-block;
  background: url("../images/StoksiaLogo.png");
  min-height: 72px;
  min-width: 312px;
  background-repeat: no-repeat;
  margin-top: 10px;
  margin-bottom: -20px; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0; }

a {
  background: transparent; }
  a:focus {
    outline: thin dotted; }
  a:active, a:hover {
    outline: 0; }

h1 {
  margin: 0.67em 0;
  font-size: 2em; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

hr {
  height: 0;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

mark {
  color: #000;
  background: #ff0; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre-wrap; }

q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

small {
  font-size: 80%; }

sub {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }

sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0; }

legend {
  padding: 0;
  border: 0; }

button, input, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: 100%; }

button, input {
  line-height: normal; }

button,...

JavaScript

$(function(){$(".timer").countdown({date:$(".timer").data("date"),render:function(e){return $(this.el).html(""+e.days+" dag(en), "+e.hours+" uur, "+e.min+" min")}})});


// Generated by CoffeeScript 1.4.0

/*
countdown is a simple jquery plugin for countdowns

Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
and GPL-3.0 (http://opensource.org/licenses/GPL-3.0) licenses.

@source: http://github.com/rendro/countdown/
@autor: Robert Fleischmann
@version: 1.0.1
*/


(function() {

  (function($) {
    $.countdown = function(el, options) {
      var getDateData,
        _this = this;
      this.el = el;
      this.$el = $(el);
      this.$el.data("countdown", this);
      this.init = function() {
        _this.options = $.extend({}, $.countdown.defaultOptions, options);
        if (_this.options.refresh) {
          _this.interval = setInterval(function() {
            return _this.render();
          }, _this.options.refresh);
        }
        _this.render();
        return _this;
      };
      getDateData = function(endDate) {
        var dateData, diff;
        endDate = Date.parse($.isPlainObject(_this.options.date) ? _this.options.date : new Date(_this.options.date));
        diff = (endDate - Date.parse(new Date)) / 1000;
        if (diff <= 0) {
          diff = 0;
          if (_this.interval) {
            _this.stop();
          }
          _this.options.onEnd.apply(_this);
        }
        dateData = {
          years: 0,
          days: 0,
          hours: 0,
          min: 0,
          sec: 0,
          millisec: 0
        };
        if (diff >= (365.25 * 86400)) {
          dateData.years = Math.floor(diff / (365.25 * 86400));
          diff -= dateData.years * 365.25 * 86400;
        }
        if (diff >= 86400) {
          dateData.days = Math.floor(diff / 86400);
          diff -= dateData.days * 86400;
        }
        if (diff >= 3600) {
          dateData.hours = Math.floor(diff / 3600);
          diff -=...