JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="mahi_holder">
    <div class="container">
      <div class="row bg_1">
        <h2><i>Border effects</i></h2>
        <div class="col-3">
            <input class="effect-1" type="text" placeholder="Placeholder Text">
              <span class="focus-border"></span>
          </div>
        <div class="col-3">
            <input class="effect-2" type="text" placeholder="Placeholder Text">
              <span class="focus-border"></span>
          </div>
        <div class="col-3">
            <input class="effect-3" type="text" placeholder="Placeholder Text">
              <span class="focus-border"></span>
          </div>        
        <div class="col-3">
            <input class="effect-4" type="text" placeholder="Placeholder Text">
              <span class="focus-border"></span>
          </div>
        <div class="col-3">
            <input class="effect-5" type="text" placeholder="Placeholder Text">
              <span class="focus-border"></span>
          </div>
        <div class="col-3">
            <input class="effect-6" type="text" placeholder="Placeholder Text">
              <span class="focus-border"></span>
          </div>        
        <div class="col-3">
            <input class="effect-7" type="text" placeholder="Placeholder Text">
              <span class="focus-border">
                <i></i>
              </span>
          </div>
        <div class="col-3">
            <input class="effect-8" type="text" placeholder="Placeholder Text">
              <span class="focus-border">
                <i></i>
              </span>
          </div>
        <div class="col-3">
            <input class="effect-9" type="text" placeholder="Placeholder Text">
              <span class="focus-border">
                <i></i>
              </span>
          </div>
      </div> 
      <div class="row bg_2">
        <h2><i>Background Effects</i></h2>
        <div class="col-3">
        	<input class="effect-10" type="text"...

CSS

@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');
body{
  font-family: 'Muli', sans-serif;
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/geometry2.png");
}
h2 {
    font-family: 'Damion', cursive;
    font-weight: 400;
    color: #4caf50;
    font-size: 35px;
    text-align: center;
    position: relative;
}
h2:before {
    position: absolute;
    content: '';
    width: 100%;
    left: 0;
    top: 22px;
    background: #4caf50;
    height: 1px;
}
h2 i {
    font-style: normal;
    background: #fff;
    position: relative;
    padding: 10px;
}
:focus{outline: none;}

/* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}

:focus{outline: none;}

.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}

.effect-1, 
.effect-2, 
.effect-3{border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;}

.effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #4caf50; transition: 0.4s;}
.effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}

.effect-2 ~ .focus-border{position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #4caf50; transition: 0.4s;}
.effect-2:focus ~ .focus-border{width: 100%; transition: 0.4s; left: 0;}

.effect-3 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; z-index: 99;}
.effect-3 ~ .focus-border:before, 
.effect-3 ~ .focus-border:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 100%; background-color: #4caf50; transition: 0.4s;}
.effect-3 ~ .focus-border:after{left: auto; right: 0;}
.effect-3:focus ~ .focus-border:before,...