JSFiddle - React, Tailwind, and code Playground

by mckabue

HTML

<div id="DIV_1">
	<button id="BUTTON_2">
		<i id="I_3"></i>
	</button>
	<div id="DIV_4">
		<div id="DIV_5">
			<div id="DIV_6">
				Search here...
			</div>
		</div>
		<button id="BUTTON_7">
			<i id="I_8"></i>
		</button> 
		<button id="BUTTON_9">
			<i id="I_10"></i>
		</button> 
		<button id="BUTTON_11">
			<i id="I_12"></i>
		</button> 
		<button id="BUTTON_13">
			<i id="I_14"></i>
		</button>
	</div>
	<div id="DIV_15">
		<div id="DIV_16">
			<div id="DIV_17">
			</div>
			<div id="DIV_18">
				<input type="search" id="INPUT_19" />
				<div id="DIV_20">
					<span id="SPAN_21">Search</span>
				</div>
			</div>
		</div>
		<div id="DIV_22">
			<div id="DIV_23">
				We couldnt find anything to match <b id="B_24">"<span id="SPAN_25">hhf</span>"</b>. Please <a href="/contact" id="A_26">CONTACT US</a> if its something you would like us to add ASAP, meanwhile, you can search something else related. Thanks for your Understanding.
			</div>
			<!---->

			<!---->

			<!---->

			<div id="DIV_27">
				<div id="DIV_28">
					<span id="SPAN_29"></span><span id="SPAN_30"></span><span id="SPAN_31"></span><span id="SPAN_32"></span><span id="SPAN_33"></span><span id="SPAN_34"></span>
				</div>
			</div>
		</div>
		<!---->

	</div>
</div>

CSS

#DIV_1 {
    box-sizing: border-box;
    color: rgb(41, 43, 44);
    height: 304px;
    text-decoration: none solid rgb(41, 43, 44);
    width: 500px;
    column-rule-color: rgb(41, 43, 44);
    perspective-origin: 250px 152px;
    transform-origin: 250px 152px;
    caret-color: rgb(41, 43, 44);
    border: 0px none rgb(41, 43, 44);
    font: normal normal 400 normal 16px / normal "Product Sans", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
    outline: rgb(41, 43, 44) none 0px;
    overflow: hidden auto;
}/*#DIV_1*/

#DIV_1:after {
    box-sizing: border-box;
    color: rgb(41, 43, 44);
    text-decoration: none solid rgb(41, 43, 44);
    column-rule-color: rgb(41, 43, 44);
    caret-color: rgb(41, 43, 44);
    border: 0px none rgb(41, 43, 44);
    font: normal normal 400 normal 16px / normal "Product Sans", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
    outline: rgb(41, 43, 44) none 0px;
}/*#DIV_1:after*/

#DIV_1:before {
    box-sizing: border-box;
    color: rgb(41, 43, 44);
    text-decoration: none solid rgb(41, 43, 44);
    column-rule-color: rgb(41, 43, 44);
    caret-color: rgb(41, 43, 44);
    border: 0px none rgb(41, 43, 44);
    font: normal normal 400 normal 16px / normal "Product Sans", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
    outline: rgb(41, 43, 44) none 0px;
}/*#DIV_1:before*/

#BUTTON_2 {
    box-shadow: rgba(0, 0, 0, 0.16) 2px 0px 4px 0px;
    color: rgb(236, 238, 239);
    cursor: pointer;
    display: none;
    height: 40px;
    left: 0px;
    position: absolute;
    text-decoration: none solid rgb(236, 238, 239);
    top: 0px;
    touch-action: manipulation;
    width: 40px;
    z-index: 2;
    column-rule-color: rgb(236, 238, 239);
    caret-color: rgb(236, 238, 239);
    background: rgb(234, 20, 20) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(236, 238, 239);
    font: normal normal 400 normal 24px / normal Arial;
    outline: rgb(236, 238, 239) none...