JSFiddle - React, Tailwind, and code Playground

by gentou

HTML

<section id="tech">
	<div class="example tech swaper_container">
		<div class="svgwrapper swaper front">	

		<div class="techlist swaper rear">
			<p>
				Lrem Ipsum
			</p>
		</div>
	</div>
  
  	<div class="example tech swaper_container">
		<div class="svgwrapper swaper front">	
		  <svg width="400" height="180">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"      style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
      </svg>
		</div>
		<div class="techlist swaper rear">
			<p>
				Lrem Ipsum
			</p>
		</div>
	</div>
  
  
  	<div class="example tech swaper_container">
		<div class="svgwrapper swaper front">	
		  <svg width="400" height="180">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"      style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
      </svg>
		</div>
		<div class="techlist swaper rear">
			<p>
				Lrem Ipsum
			</p>
		</div>
	</div>
  
  	<div class="example tech swaper_container">
		<div class="svgwrapper swaper front">	
		  <svg width="400" height="180">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"      style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
      </svg>
		</div>
		<div class="techlist swaper rear">
			<p>
				Lrem Ipsum
			</p>
		</div>
	</div>
  
  	<div class="example tech swaper_container">
		<div class="svgwrapper swaper front">	
		  <svg width="400" height="180">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"      style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
      </svg>
		</div>
		<div class="techlist swaper rear">
			<p>
				Lrem Ipsum
			</p>
		</div>
	</div>
  
  	<div class="example tech swaper_container">
		<div class="svgwrapper swaper front">	
		  <svg width="400" height="180">
        <rect x="50" y="20" rx="20" ry="20" width="150" height="150"      style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
      </svg>
		</div>
		<div class="techlist swaper rear">
			<p>
				Lrem...

SCSS

@mixin block($width, $width-percentage-to-height){
    width: $width;
    &:after{
      content: "";
      display: block;
      padding-bottom: $width-percentage-to-height;
    }
}

@mixin centered-child {
     top: 50%;
     left: 50%;
     position: absolute;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
}



.example{
	float: left;
	@include block(33.3333%, 100%);
}

.tech{
  position: relative;
  svg{
      @include centered-child;
      display: block;
      max-width: 65%;
      max-height: 65%;
      height: 100%;
      opacity: 1;
      transition: all $animation-timing ease;
  }

  .svgwrapper{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .swaper{
      transition: all $animation-timing ease;
      opacity: 0;
  }

  .rear{
      display: none;
  }
  .front{
      transition: all $animation-timing ease;
      opacity: 1;
  }
}

.techlist{
  width: 50%;
  height: 50%;
  @include centered-child;
}