JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<div id="pruebaL">
  <div class="texto">
    Calcula tu precio en 2 minutos
  </div>
  <div class="iconos">

    <div class="icono">
      <a href="#" class="icon-car">
        <b>Coche</b>
      </a>
    </div>
    <div class="icono">
      <a href="#" class="icon-moto">
        <b>Moto</b>
      </a>
    </div>
    <div class="icono">
      <a href="#" class="icon-home">
        <b>Hogar</b>
      </a>
    </div>
    <div class="icono">
      <a href="#" class="icon-health">
        <b>Salud</b>
      </a>
    </div>

  </div>

</div>

CSS

div#pruebaL {
  border: solid;
  width: auto;
  height: 100px;
}

.iconos {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

.icono {
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.texto {
  text-align: center;
      padding-bottom: 10px;

}
a{
  display : block;
      color: #4c4c4c!important;

  text-decoration : none;
}


#pruebaL a:before{
  display: block;
    font-size: 40px;
}

JavaScript

/*


jQuery("head").append("<style>\
  div#tarificadorRapido {\
    width: auto;\
    height: 100px;\
  }\
  .iconos {\
    display: grid;\
    grid-template-columns: auto auto auto auto;\
    text-align: center;\
  }\
  #stickyPanel .iconos {\
    padding-left: 20px;\
    padding-right: 20px;\
  }\
  .icono {\
    height: 100%;\
  }\
  #tarificadorRapido .texto {\
    text-align: center;\
    padding-bottom: 12px;\
  }\
  #stickyPanel .texto {\
    text-align: center;\
  }\
  #tarificadorRapido a:before{\
    display: inline-block;\
    font-size: 25px;\
    border-radius: 20px;\
    background-color: #db2108;\
    color: white;\
    padding: 7px;\
  }\
  #tarificadorRapido b {\
    font-size: 11px;\
    display: block;\
  }\
  #stickyPanel b {\
    font-size: 11px;\
    display: block;\
  }\
  .texto b {\
    font-size: 12px !important;\
    display: block;\
  }\
  div#stickyPanel {\
    position: fixed;\
    top: 0;\
    width: 100%;\
    height: 100px;\
    background-color: white;\
    z-index: 9999;\
    display: none;\
    box-shadow: 0px 20px 18px -10px #716f6f;\
  }\
  #stickyPanel a:before{\
    display: inline-block;\
    font-size: 25px;\
    border-radius: 20px;\
    background-color: #db2108;\
    color: white;\
    padding: 7px;\
  }\
  #stickyPanel img {\
    width: 103px;\
    padding-left: 5px;\
    float: left;\
  }\
  #stickyPanel p {\
    padding-top: 10px;\
  }\
  .icon-movil:before {\
    content : '\\e833';\
    font-size: 20px;\
    position: absolute;\
    left: 11px;\
    top: 3px;\
  }\
  .VS-button-wrapper .aThinner{\
    padding: 5px !important;\
    min-height: 0;\
    background : white;\
  }\
  span.icon-movil{\
   float: right;\
   padding-right: 30px;\
 }\
 </style>");
jQuery('.contenedor').eq(2).parent().css("background-color",...