JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<input type="text" name="submit_name" id="submit_name" value="" placeholder="Enter a name for the website" required>

<div id="submit_name-desc" class="input-desc">This is the name of the website</div>
<br />
<br />
<input type="text" name="submit_name" id="submit_name" value="" placeholder="Enter a name for the website" required>

<div id="submit_name-desc" class="input-desc">This is the name of the website</div>

<br />
<br />
<input type="text" name="submit_name" id="submit_name" value="" placeholder="Enter a name for the website" required>

<div id="submit_name-desc" class="input-desc">This is the name of the website</div>

<br />
<br />
<input type="text" name="submit_name" id="submit_name" value="" placeholder="Enter a name for the website" required>

<div id="submit_name-desc" class="input-desc">This is the name of the website</div>

CSS

.input-desc:before, .input-desc-hover:before {
    content: ' ';
    position: absolute;
    border: 10px solid transparent;
    border-right-color: #4c4c4c;
    width: 0px;
    height: 0px;
    margin-left: -29px;
    margin-top: -2px;
}

.input-desc {
    float: right;
    padding: 9px;
    background-color: #4c4c4c;
    color: #ffffff;
    width: 250px;
}

.input-desc:hover, .input-desc-hover {
    float: right;
    padding: 9px;
    background-color: #4c4c4c;
    color: #ffffff;
    -moz-box-shadow: 0px 2px 5px #aaaaaa;
    -webkit-box-shadow: 0px 2px 5px #aaaaaa;
    box-shadow: 0px 2px 5px #aaaaaa;
    cursor: default;
    width: 265px;
    animation:desc 0.3s;
    -moz-animation:desc 0.3s; /* Firefox */
    -webkit-animation:desc 0.3s; /* Safari and Chrome */
}

@keyframes desc {from {width: 250px;} to {width: 265px;}}
@-moz-keyframes desc { from {width: 250px;} to {width: 265px;} }
@-webkit-keyframes desc {from {width: 250px;}to {width: 265px;}}

JavaScript

$('input').on('blur', function(){
   $(this).next('div').removeClass('input-desc-hover').addClass('input-desc');
}).on('focus', function(){
  $(this).next('div').removeClass('input-desc').addClass('input-desc-hover');
});