JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="phone_wrapper">
  <header>
    <div class="speaker">
      <div class="mic"></div>
    </div>
    <nav>
      <div class="tab tab1 active">
        <div class="block"></div>
      </div>
      <div class="tab tab2">
        <div class="block"></div>
      </div>
      <div class="indicator"></div>
    </nav>
  </header>
  <main>
    <div class="tab_reel">
      <div class="tab_panel1">
        <div class="card card_large">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="card card_list">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="card card_list">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="card card_list">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
      </div>
      <div class="tab_panel2">
        <div class="card card_list">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="card card_list">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="card card_list">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
            <div class="block"></div>
          </div>
        </div>
        <div class="card card_large">
          <figure></figure>
          <div class="desc">
            <div class="block"></div>
    ...

CSS

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body, html {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: -webkit-gradient(linear, left top, left bottom, from(green), to(rgba(30, 144, 255, 0.2)));
  background: linear-gradient(to bottom, pink, rgba(30, 144, 255, 0.2));
}

.phone_wrapper {
  width: 320px;
  height: 470px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: white;
  -webkit-box-shadow: 0px 40px 40px -20px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 40px 40px -20px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  overflow: hidden;
}
.phone_wrapper header {
  background: #bfd3f8;
  width: 100%;
  height: 75px;
  border-radius: 10px 10px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.phone_wrapper header .speaker {
  width: 100%;
  height: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.phone_wrapper header .mic {
  width: 15%;
  height: 7px;
  background: #92b4f2;
  border-radius: 120px;
}
.phone_wrapper header nav {
  width: 100%;
  height: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.phone_wrapper header nav .tab {
  width: 50%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
 ...

JavaScript

var reel = document.querySelector('.tab_reel');
var tab1 = document.querySelector('.tab1');
var tab2 = document.querySelector('.tab2');
var panel1 = document.querySelector('.tab_panel1');
var panel2 = document.querySelector('.tab_panel2');

function slideLeft(e) {
	tab2.classList.remove('active');
	this.classList.add('active');
	reel.style.transform = "translateX(0%)";
}

function slideRight(e) {
	tab1.classList.remove('active');
	this.classList.add('active');
	reel.style.transform = "translateX(-50%)";
}

tab1.addEventListener('click', slideLeft);
tab2.addEventListener('click', slideRight);