JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<div class='groupTgt'>
  <div class='barraTgt'>
    <p>Recuerda que puedes obtener tu <strong>Seguro de </strong> desde sólo <strong></strong></p>
    <button type='button' class='rounded'><strong>Contrátalo</strong></button>
  </div>
  <div class='arrow-left'>
  </div>
</div>


	    	text-align: center;\		line-height:25px;\
        
            height: 50px;\
            
            <script>
jQuery("head").append("<style>\
	.barraTgt{\
		background: #e95d0f;\
	    width: 100%;\
	    display: block;\
	    color: #fff !important;\
	    font-size: 25px;\
	    padding: 15px;\
	    text-align: center;\
	    margin-bottom: 15px;\
		line-height:25px;\
	}\
	.barraTgt strong{\
		font-weight:bold !important;\
	}\
	a.barraTgt:after {\
	    content: '\\f054';\
	    font-family: fontawesome-alloy;\
	    margin-left: 20px;\
	}\
	@media screen and (max-width: 767px){\
    	.barraTgt{\
        	margin:20px;\
			width: auto;\
    		font-size: 22px;\
		}\
		div#Banner-alertas_button {\
    		top: 260px !important;\
		}\
    }\
	</style>");

var linkTgt;
switch(localStorage.getItem("ultimaTarificacion")){
	case "coche":
		linkTgt="https://www.caser.es/calcula-tu-seguro-de-coche/parrilla-presupuestos?tgt=true";
	break;
	case "hogar":
		linkTgt="https://www.caser.es/calcula-tu-seguro-de-hogar/listado-presupuesto?tgt=true";
	break;
	case "moto":
		linkTgt="https://www.caser.es/calcula-tu-seguro-de-moto/parrilla-presupuestos?tgt=true";
	break;
	case "salud":
		linkTgt="https://www.caser.es/calcula-tu-seguro-de-salud/parrilla-presupuestos?tgt=true";
	break;
}

var checkExistCarr = setInterval(function() {
   if (jQuery(".HOME-Carousel-Conatiner").length>0) {
      clearInterval(checkExistCarr);
     if(localStorage.getItem("ultimaTarificacionPrecio")!=null && localStorage.getItem("ultimaTarificacion")!=null){
     jQuery(".HOME-Carousel-Conatiner").prepend("<a href='" + linkTgt + "' class='barraTgt'>Recuerda que puedes obtener tu <strong>Seguro de " +...

CSS

.groupTgt{
   height: overflow;
  }
	.barraTgt{
  	width:calc(100% - 25px);
    height: 50px;
		background: #e95d0f;
		display: inline-block;
		line-height:25px;
	}
  .arrow-left {
  	display: inline-block;
  	width: 0; 
  	height: 0; 
  	border-top: 25px solid transparent;
  	border-bottom: 25px solid transparent;
  	border-left: 25px solid #e95d0f;
	}
  .barraTgt  p{
    	display: inline-block;
  	font-size: 25px;
    color: #fff !important;
  }
	.barraTgt strong{
		font-weight:bold !important;
	}
  .rounded{
  	display: inline-block;
    border-radius: 999px;
	}
  .rounded  a{
    color: #e95d0f !important;
	}
	@media screen and (max-width: 767px){
    	.barraTgt{
        	margin:20px;
			width: auto;
    		font-size: 22px;
		}
		div#Banner-alertas_button {
    		top: 260px !important;
		}
    }

JavaScript

< script >
  jQuery("head").append("<style>\
	.barraTgt{\
  	width:calc(100% - 25px);\
		background: #e95d0f;\
		display: table;\
    float: left;\
    text-align: center;\
    margin-bottom: 15px;\
	}\
  .arrow-left {\
  	display: inline-block;\
  	width: 0; \
  	height: 0; \
    float: left;\
  	border-top: 25px solid transparent;\
  	border-bottom: 25px solid transparent;\
  	border-left: 25px solid #e95d0f;\
	}\
  .barraTgt  p{\
    	display: table-cell;\
  	font-size: 30px;\
    color: #fff !important;\
  }\
	.barraTgt strong{\
		font-weight:bold !important;\
	}\
  .rounded{\
  	display: table-cell;\
    border-radius: 999px;\
	}\
  .rounded  a{\
  font-size: 25px;\
    color: #e95d0f !important;\
	}\
	@media screen and (max-width: 767px){\
    	.barraTgt{\
        	margin:20px;\
			width: auto;\
    		font-size: 22px;\
		}\
		div#Banner-alertas_button {\
    		top: 260px !important;\
		}\
    }\
	</style>");

var linkTgt;
switch (localStorage.getItem("ultimaTarificacion")) {
  case "coche":
    linkTgt = "https://www.caser.es/calcula-tu-seguro-de-coche/parrilla-presupuestos?tgt=true";
    break;
  case "hogar":
    linkTgt = "https://www.caser.es/calcula-tu-seguro-de-hogar/listado-presupuesto?tgt=true";
    break;
  case "moto":
    linkTgt = "https://www.caser.es/calcula-tu-seguro-de-moto/parrilla-presupuestos?tgt=true";
    break;
  case "salud":
    linkTgt = "https://www.caser.es/calcula-tu-seguro-de-salud/parrilla-presupuestos?tgt=true";
    break;
}

var checkExistCarr = setInterval(function() {
      if (jQuery(".HOME-Carousel-Conatiner").length > 0) {
        clearInterval(checkExistCarr);
        if (localStorage.getItem("ultimaTarificacionPrecio") != null && localStorage.getItem("ultimaTarificacion") != null) {
          jQuery(".HOME-Carousel-Conatiner").prepend("<div class='groupTgt'><div class='barraTgt'><p>Recuerda que puedes obtener tu <strong>Seguro de " + localStorage.getItem("ultimaTarificacion") + "</strong> desde sólo <strong>" +...