JSFiddle - React, Tailwind, and code Playground
by kiokotzu
CSS
// bloque Civico
.bloque-home-civico{
margin-bottom: 15px;
h2.pane-title{
background: #da004c;
color: #fff;
padding: 0px 20px !important;
position: relative;
height: auto;
display: inline-block;
border-radius: 0 5px 5px 0;
min-width: initial;
margin-bottom: 15px !important;
&::before{
content: '';
left: -10px;
position: absolute;
top: 50%;
border-right: 10px solid #da004c;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
margin-top: -10px;
}
}
.pane-content{
padding: 10px;
color: #fff;
background: url(http://static.shock.com.co.s3.amazonaws.com/especiales/civico/imgs/bg.png) 0 0 repeat-x #da004c;
width: 100%;
display: inline-block;
*display: inline;
-webkit-animation: backgroundCivico 150s linear infinite;
-moz-animation: backgroundCivico 150s linear infinite;
-o-animation: backgroundCivico 150s linear infinite;
animation: backgroundCivico 150s linear infinite;
}
.view-content{
.view-header,
.view-content{
float: left;
}
.view-header{
width: 40%;
text-align: center;
.logoCivicoShock{
width: 224px;
height: 42px;
display: block;
margin: 10px auto;
background: url(http://static.shock.com.co.s3.amazonaws.com/especiales/civico/imgs/shock-mas-civico.png) center no-repeat;
}
p{
margin: 0 30px 10px 30px;
text-align: center;
}
.bateriaCivico,
.guitarraCivico{
display: inline-block;
*display: inline;
margin: 0 5px;
}
}
.view-content{
width: 60%;
ul{
width: 100%;
display: inline-block;
*display: inline;
margin: 10px 0 0 0;
}
li{
float: left;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 5px;
.field--name-share-content{
display: none;
}
> div{
position: relative;
margin: 0;
.group-info{
position: absolute;
left: 0;
right:...