JSFiddle - React, Tailwind, and code Playground
by CRHain88
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=5, viewport-fit=cover">
<title>Fabric.com: Online Shopping for Home Decor, Apparel, Quilting & Designer Fabric</title>
<style>
.form-input-text {
border-radius: 4px;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
font-size: 1rem;
height: 32px;
padding: 0 .5rem;
width: 100%
}
.form-input-submit {
background-color: #07b3be;
border-bottom: 1px solid #05868f;
border-left: 0;
border-radius: 4px;
border-right: 0;
border-top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: block;
font-size: 1rem;
font-weight: 600;
height: 32px;
margin: 0 0 0 .5rem;
padding: 0 1rem;
text-shadow: -1px -1px 0 #069da7
}
.form-input-submit:hover {
background-color: #1b1c46;
border-bottom: 1px solid #0d0d21;
text-shadow: -1px -1px 0 #141533
}
.search {
display: -ms-flexbox;
display: flex
}
.menu-nav__list {
list-style: none;
margin: 0 auto;
padding: 0
}
.menu-nav__link,
.menu-nav__list {
display: -ms-flexbox;
display: flex
}
.menu-nav__link {
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%
}
.menu-nav__link-icon {
display: block;
height: 1rem;
width: 1rem
}
.menu-nav__link-icon svg {
fill: currentColor
}
.menu-nav__link-icon+.menu-nav__link-text {
margin: 0 0 0 .5rem
}
.account-nav {
background-color: #545d65;
min-height: 32px
}
...