JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://sub.ueberflie.ga/assets/css/bs5/bootstrap-dark.min.css">

<div class="wrapper d-flex nowarp justify-content-start align-items-center">
<div class="logo"></div>

<div class="vertline"></div>
</div>

<div class="square">
    <div class="left"></div>
    <div class="center d-flex nowarp justify-content-start align-items-center">
    	<div class="logo"></div>

<div class="vertline"></div>

    </div>
    <div class="right"></div>
</div>

CSS

.wrapper {
	position: relative;
	left: 0;
  width: 360px;
  height: 80px;
  background-color: #222;
  border-radius: 6px;
  padding: 10px;
  display: flex;
	-webkit-animation: center-animate 0.3s ease-out both;
	        animation: center-animate 0.3s ease-out both;
}

.logo {
  background: #f0f;
  height: 80px;
  width: 80px;
}


.vertline {
  background: #f0f;
  height: 70%;
  width: 4px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 2px;
}


/* children will be positioned relativly to this element */
.square {
    position: relative;
    height: 100px;
}

.left,
.center,
.right {
    position: absolute;
    top: 0;
    bottom: 0;
		background: #222;
}


/* we need room for a 20 pixel border radius (on one side) */
.left,
.right { width: 20px }

.left { border-radius: 10px 0 0 10px }
.right { border-radius: 0 10px 10px 0 }


/* child layout definitions */
.center {
    /* center needs to be 20 pixels from the left, 
    so it doesn't overlap with the .left element */
    left: 20px;

    /* needs a width of 1 pixel, this causes 
    scaleX(60) is equal to 60 pixels */
    width: 360px;
    transform: scaleX(60);

    /* we need to scale the texture from the left side 
    for it to align correctly, default is center */
    transform-origin: left;
}

.right {
    /* we need to move the right element to align with
    the right side of the .center element 
    20px + 60px = 80px */
    transform: translateX(380px);
}

.center {
    animation: center-animate 8.4s ease infinite alternate;
}

.right {
    animation: right-animate 8.4s ease infinite alternate;
}

@keyframes right-animate {
    0% { transform: translateX(18px) }
    100% { transform: translateX(380px) }
}

@keyframes center-animate {
    0% { transform: scaleX(0) }
    100% { transform: scaleX(1) }
}



/* center */
.square {
	position: absolute;
	left: 0;
	top: 0;
}