JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div id="blupp">


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

<input type="text" name="submit_name" id="submit_name2" class="submit-name" value="" placeholder"Enter a name for the website" required /><div id="submit_name-desc2" class="desc 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

$('#blupp').bind('blur', function(){

    $("~ .desc", this).first().removeClass('input-desc-hover').addClass('input-desc');
}).bind('focus', function(){
    $("~ .desc", this).first().removeClass('input-desc').addClass('input-desc-hover');
    
});