JSFiddle - React, Tailwind, and code Playground

by mowglisanu

HTML

<br><br>
<div id="search-popup">
    <form action="">
        <input type="text" name="q">
        <input type="submit" value="Search">
        <label><input type="checkbox" id="search-google-popup" name="sitesearch" value="www.vmc.com"> Search Google</label>
    </form>
</div>

CSS

#search-popup{
    border: 1px green solid;
    border-radius: 0.5em;
    padding: 1em;
    display: inline-block;
    position: fixed;
}
#search-popup form:before{
    position: absolute;
    content:"";
    display:block;
    width:0;
    height:0;
    border-left: 0.5em solid transparent;
    border-right: 0.5em solid transparent;
    border-bottom: 0.75em solid green;
    left: 50%;
    top:-0.75em;
}