JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<div id="nav-search-result">
    <fieldset id="search-result-fset">
        <legend id="search-result-lgnd">Search result(s)</legend>
        <div id="c_nav-search-result"></div>
    </fieldset>
</div>

CSS

#nav-search-result {
	height: 300px; width: 500px;
	position: absolute;
    top: 50%; left: 50%;
    margin-top: -150px; margin-left: -250px;
    background: #222;
    
    border: groove 2px #333;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

#search-result-fset {
    font-family: Arial; font-size: 14px; color: #FFF;
    position: relative;
    height: 280px;
    border: groove 2px #333;
    border-radius: 4px;
}

#search-result-lgnd {
    border-radius: 4px;
    text-align: middle;
    padding: 4px;
    
    background-image: linear-gradient(bottom, #101BB3 11%, #3B63DB 56%, #4785CC 78%);
background-image: -o-linear-gradient(bottom, #101BB3 11%, #3B63DB 56%, #4785CC 78%);
background-image: -moz-linear-gradient(bottom, #101BB3 11%, #3B63DB 56%, #4785CC 78%);
background-image: -webkit-linear-gradient(bottom, #101BB3 11%, #3B63DB 56%, #4785CC 78%);
background-image: -ms-linear-gradient(bottom, #101BB3 11%, #3B63DB 56%, #4785CC 78%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.11, #201BB3),
	color-stop(0.56, #3B63DB),
	color-stop(0.78, #4785CC)
);
}

#c_nav-search-result {
    max-height: 93%; max-width: 100%;
    background-color: transparent;
    overflow-y: auto;
}