JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css">
<ins class="adsbygoogle" style="display: block; width: 414px; height: 65px; opacity: 1; z-index: 999999; position: fixed; left: 0px; bottom: 0px; background: rgb(0, 0, 0);" data-ad-client="pub-0444678661424526" data-ad-channel="9449888397" data-adsbygoogle-status="done" data-anchor-shown="true"><ins style="display: block; position: relative; z-index: 1; height: 15px; box-shadow: rgba(0, 0, 0, 0.2) 0px -1px 5px -1px, rgba(0, 0, 0, 0.0980392) 0px 1px 2px -1px; background-color: rgb(216, 216, 216);"><span style="display: block; position: absolute; width: 70px; height: 45px; bottom: 0px; left: 50%; margin-left: -35px;"><svg style="margin: 0 0 0 -30px; position: absolute; bottom:0; left:50%;display: block; width: 60px;height: 30px;" xmlns="http://www.w3.org/2000/svg"><defs><filter id="dropShadowTop" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feComponentTransfer in="SourceAlpha" result="TransferredAlpha">  <feFuncR type="discrete" tableValues="0.8"></feFuncR>  <feFuncG type="discrete" tableValues="0.8"></feFuncG>  <feFuncB type="discrete" tableValues="0.8"></feFuncB></feComponentTransfer><feGaussianBlur in="TransferredAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="0" dy="0" result="offsetblur"></feOffset><feMerge>  <feMergeNode></feMergeNode>  <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><path d="M10,15 C 20,0 40,0 50,15 Z" stroke="#D8D8D8" stroke-width="1" fill="#D8D8D8" style="filter:url(#dropShadowTop)"></path><rect x="0" y="15" width="60" height="15" style="fill:#D8D8D8"></rect><g class="up" stroke="#888888" stroke-width="2px" stroke-linecap="square" style="display: none;"><line x1="22" y1="13" x2="38"...