JSFiddle - React, Tailwind, and code Playground

by ludwigwoltmann

HTML

<form class="h-searchform">
    <p class="h-title">Search</p>
    <input type="text" class="h-searchform-text"/>
    <input type="submit" value="&gt;" class="h-searchform-button h-title"/>
</form>

CSS

body {
    background-color: lightblue;
}
.h-searchform {
    margin: 100px 200px;
    width: 229px;
}
.h-title {
    font: bold 16px/40px "Trebuchet MS";
    color: #FFF;
}
.h-searchform-text {
    width: 173px;
    height: 27px;
    background-color: #1340bd;
    border-top: 1px solid #0b2fa7;
    border-right: 1px solid #0e39b4;
    border-left: 1px solid #2249c2;
    border-bottom: 1px solid #2264e4;
    margin-right: 12px;
    font: 11px/22px "Trebuchet MS";
    color: #FFF;
}
.h-searchform-button {
    width: 30px;
    height: 27px;
    background-color: #9c0000;
    border-top: 1px solid #b20000;
    border-right: 1px solid #6d0000;
    border-left: 1px solid #7d0000;
    border-bottom: 1px solid #640000;
}