JSFiddle - React, Tailwind, and code Playground

by tchalvakspam

HTML

<form action="" id="smart-search-form" method="post" name="form1">
<table width="150" cellspacing="0" cellpadding="0" border="0">
  <tbody><tr>
    <td>
        <div class="sidebar-heading" id="feature-search-heading">Feature Search</div>
    </td>
  </tr>
  <tr>
    <td><table width="100%" cellspacing="0" cellpadding="1" border="0">
      <tbody><tr>
        <td>
            <input type="text" placeholder="Words in Name" value="" class="input1" id="SSKeyword" name="SSKeyword"></td>
      </tr>
      <tr>
        <td style="font-size:13px"><div align="center">
            <select class="input1" id="SSBrandCode" name="SSBrandCode">
              <option selected="" value="">All Brands</option>
              <option value="AX">Aetrex</option>
              <option value="AATT">Alan Payne</option>
              <option value="AL">Alden</option>
              <option value="AE">Allen Edmonds</option>
              <option value="AP">Apex</option>
              <option value="BB">Bacco Bucci</option>
              <option value="BA">Bates</option>
              <option value="BS">Bostonian</option>
              <option value="CA">Cat Footwear</option>
              <option value="CL">Clarks</option>
              <option value="CH">Cole Haan</option>
              <option value="DR">Drew</option>
              <option value="EC">ECCO</option>
              <option value="GB">G. Brown</option>
              <option value="TK">H.S. Trask</option>
              <option value="IN">Indigo</option>
              <option value="JM">Johnston &amp; Murphy</option>
              <option value="MG">Magnanni</option>
              <option value="MZ">Mezlan</option>
              <option value="PR">Privo</option>
              <option value="RR">Red Wing Heritage</option>
              <option value="RW">Red Wing Work</option>
              <option value="SA">Santoni</option>
              <option value="SE">Sebago</option>
              <option value="SB">Sherman Brothers...

CSS

#feature-search-heading{
    position:relative;
    margin-bottom:5px;
}    
    
#feature-search-heading:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    
    border: 10px solid transparent;
    border-top-color: darkblue;

    top: 100%;
    left: 50%;
    margin-left: -10px;
}

#smart-search-form #SSKeyword {
    color: #666666;
    width: 146px;
}
#smart-search-form #SSKeyword[value] {
    color: black;
}

#smart-search-form select{
    width:150px; 
    font-size:9px;
    color:black;
}
#smart-search-form select[value='']{
    color:#000099;
}
#smart-search-form option[selected='']{
    color:#000099;
}
#smart-search-form option[value='']{
    color:#666;
}
#smart-search-form option[selected=selected]{
        color: #ff0000 !important;
}