JSFiddle - React, Tailwind, and code Playground

by btipling

HTML

<div class="dispLoginSearch"> <!-- LOGIN AND SEARCH -->
    <span class="spnLoginBox">
        <p>Log in to <span>My</span> <span>sdf</span> | Sign Up</p>
        <span style="width: 100%;">
            <input type="text" placeholder="Username" id="txtUsername" class="txtUsername" />
            <input type="password" placeholder="Password" id="pwPassword" class="txtPassword" />
            <input type="submit" id="sbGo" class="sbGo" value="Go" />
        </span>
        <a href="#">Forgot login/password</a>
    </span>
    <div class="searchBox">
        <div style="overflow: auto; width: 100%;">
            <a href="javascript: void(0)" class="icon"></a>
            <input type="search" name="Search" id="search" placeholder="Search" />
        </div>
    </div>
</div>

CSS

.dispLoginSearch
{
    width: 40%;
    height: 160px;
    vertical-align: middle;
    float: right;
    padding-right: 3%;
    background: #FFFFFF;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}
.spnLoginBox {
    margin-top: 3%;
    border: 1px solid #d4d4d4;
    display: block;
    width: 100%;
    font: 16px sans-serif;
    padding: 0 0 0 15px;
    border-radius: 5px;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}
#search {
height: 35px;
width: 250px;
position: absolute;
padding-left: 10px;
opacity: 1;
border: none;
outline: none;
position: absolute;
right: 35px;
box-shadow:
0px 5px #bbb,
0px 8px 10px rgba(0, 0, 0, 0.5);
}
.icon:after, .submit:after  {
content: '';
position: absolute;
width: 8px;
height: 8px;
border: 2px solid white;
border-radius: 50%;
left: 10px;
top: 9px;
}


.icon:before, .submit:before {
content: '';
position: absolute;
height: 8px;
width: 2px;
background: white;
transform: rotate(-35deg);
top: 19px;
left: 21px;
}
.icon, .submit {
width: 35px;
height: 35px;
background: #d75813;
display: block;
position: absolute;
top: 0;
right: 0;
box-shadow:
0px 5px #bc490a,
0px 8px 10px rgba(0, 0, 0, 0.5);
}


.submit {
background: #009bff;
cursor: pointer;
box-shadow:
0px 5px #0276c1,
0px 8px 10px rgba(0, 0, 0, 0.5);
}

.searchBox
{
    position: relative;
    background: #00ff00;
    width: 100%;
    text-align: left;
}