JSFiddle - React, Tailwind, and code Playground

by kobi

HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare <div>odio nec purus hendrerit</div> mollis. Morbi lectus nisi, dignissim eu varius non, tincidunt quis velit. 

<span class="Test">
    Vestibulum ante ipsum
    <br />
    primis in faucibus
</span>
orci luctus et ultrices posuere cubilia Curae; Phasellus tellus tortor, <span title="This is latin text">pellentesque non facilisis ut, interdum sit amet leo</span>. Nunc risus elit, aliquam id faucibus eu, suscipit eu est. Ut tincidunt ullamcorper mi, eget lobortis tellus molestie vel. Praesent accumsan accumsan felis, a laoreet nisi porta a. Ut et euismod dui.
<div class="Toolbar">
    <a href="#">Home</a> <a href="#">About Us</a>
    <a href="#">Google</a>
</div>
<a href="#">link in body</a>

<div class="New">ABS</div>

CSS

XXX body {background-image:url('http://t0.gstatic.com/images?q=tbn:ANd9GcTc9rumkIBrCEV4UBlgyn0inMEU08RHK2VMIBlwvoGRH6wyQYe_');}

.Toolbar a {padding: 2px 4px;
    border:solid 1px gray;
    border-color:lightgray gray gray lightgray;
    background-color:#f3f3f3;
    text-decoration:none;
    color:black;
    border-radius:4px;
    display:inline-block;
}

.Toolbar a:hover {
    border-color:#def #9be #9be #def;
    background-color:#e0f3ff;
}

.Toolbar a:active {
    border-color:#9be #def #def #9be;
    background-color:#c0d3ef;
}

.New {background-color:rgba(255,200,180,0.5); margin:10px;}