JSFiddle - React, Tailwind, and code Playground

by Thamindu Janaka

HTML

<div class="container" style="border:1px solid #00C;">
  <div class="row">
    <input type="text" placeholder="name" />
    <input type="text" placeholder="add" />
    <input type="text" placeholder="city" id="city" />
    <input type="text" placeholder="tel" />
    <input type="text" placeholder="home" />
    <input type="text" placeholder="cun" id="cun" />
    <br />
    <select id="selectBox">
      <option value="1" >1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <br />  
    <br />  
    <br />
    <select id="selectBox2">
      <option value="1" >1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>   
    </select>
  </div>
</div>

JavaScript

$(document).ready(function(e) {
    $('#selectBox').focus(function() {
        $(this).attr('size',4);
        $(this).css('position',"absolute");
        $(this).css('x-index',"1000");
    });
    $('#selectBox').blur(function() {
        $(this).attr('size',1);
		$(this).css('position',"relative");
		$(this).css('x-index',"0");
    });
	$('#selectBox2').focus(function() {
        $(this).attr('size',4);
        $(this).css('position',"absolute");
        $(this).css('x-index',"1000");
    });
    $('#selectBox2').blur(function() {
        $(this).attr('size',1);
        $(this).css('position',"relative");
        $(this).css('x-index',"0");
    });
});