JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<!-- very cool inner text shadow -->
<p>This is a Title</p>
<p class="inline-shadow">This is a Title</p>

<p class="inset-line">asdfasfasfas</p>
<hr class="inset-line">

CSS

.inline-shadow{
    color: #FFFFFF;
    background: none repeat scroll 0 0 #28A1E2;
    display: inline-block;
    font: 20px/28px "Segoe UI Semibold",Tahoma,arial,sans-serif;
    height: 28px;
    margin: 12px 0;
    padding: 2px 8px 2px 8px;
    position: relative;
    text-shadow: 0 -1px 0 #1D77A7;
    text-transform: uppercase;
    z-index: 2;
}

.inset-line {
    border-bottom: 1px solid #A00000;
    border-top: 1px solid #F00000;
}