JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="noResults">
    <h2>Sorry, no matches.
    <span>Suggestions Below</span></h2>

    
    <div>
        <i class="fa fa-exchange"></i>
        If you change from <b>2</b> to <b>4</b> convolutions, <span>154-445-4468</span> will work.
         <br/>
        <!-- <a href="#"></a> -->
    </div>
        <div>
        <i class="fa fa-arrow-down"></i>
        If you lower the Max Operating Temp. from <b>2000</b> to <b>1850</b>, <span>5</span> products will work.
             <br/>
        <a href="#">View These Results</a>
    </div>
            <div>
        <i class="fa fa-arrow-up"></i>
        If you raise the Min Operating Temp. from <b>20</b> to <b>35</b>, <span>10</span> products will work.
                <br/>
        <a href="#">View These Results</a>
    </div>
</div>

CSS

.noResults {
    font-family:sans-serif;
    font-size:14px;
    
}
.noResults h2 {
   padding-top:10px;
    
}
.noResults h2 span{
   font-size:70%;
}
.noResults div {
    padding:10px;
    line-height:1.4;
    padding-left: 50px;
    position:relative;
    
}

.noResults div  span {
    border-bottom:1px dotted black;
    /* background:#222; */
    /* color:white; */
    font-weight:bolder;
    /* border-radius:5px; */
    padding:1px 4px;
}
.noResults div i.fa {
font-size:23px;    
    float:left;
    /* margin-right:20px; */
    /* margin-bottom: 2px; */
    position:relative;
    /* top:-10px; */
        position:absolute;
    top:10px;
    left:10px;
    z-index:4;
    text-align:center;
    width:24px;
    /* background: red; */
    line-height:25px;
     -webkit-transition: all  ease-out 1s;
    -moz-transition: all  ease-out 1s;
    -o-transition: all  ease-out 1s;
    transition: all  ease-out 1s;
}
.noResults div i.fa:after {
    width:40px;
    height:40px;
    /* background: red; */
    content:'';
    display:block;
    position:absolute;
    top:-10px;
    left:-11px;
    padding:0;
    margin:0;
    border-radius:50%;
    z-index:3;
        /* border:2px solid black; */
  /*   box-shadow:0 0 0 2px black, 0 0 0 10px white,0 0 0 15px black;*/
    border:3px solid transparent; 
    
         -webkit-transition: all  ease-out .4s;
    -moz-transition: all  ease-out .4s;
    -o-transition: all  ease-out .4s;
    transition: all  ease-out .4s;
    
}
.noResults div:hover i.fa:after {
         box-shadow:0 0 0 2px black, 0 0 0 10px white,0 0 0 15px black;
    border:3px solid white;

}
.noResults div a {
    border:none;
    /* display:block; */
    font-size:80%;
    /* float:left; */
        /* width:100%; */
    margin-left: 10px;
    text-decoration: none;
    /* border-bottom:1px solid #999; */
    padding:5px 5px 2px;
    /* padding-left: 20px; */
    clear:both;
    color:#3498DB;
    /* float:right; */

}
.noResults div a:hover {
   ...