JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

<html>
<head>
    <title></title>
    <style>
    #main {
        background-color: #333;
        height: 100%;
        padding: 20px 0;
    }
    </style>
</head>
<body>
<div id="main">
    <section class="mv-tabs">
        <input id="tab-1" type="radio" name="radio-set" class="tab-selector" checked="checked"/>
        <input id="tab-2" type="radio" name="radio-set" class="tab-selector"/>
        <input id="tab-3" type="radio" name="radio-set" class="tab-selector"/>
        <div class="tab-labels">
            <label for="tab-1">Tab 1</label>
            <label for="tab-2">Tab 2</label>
            <label for="tab-3">Tab 3</label>
        </div>
        <div class="content-container">
            <div class="tab details">
                <div class="content">
                    <h3>Some content 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed eros magna. Fusce luctus gravida sem, quis dictum nisi rutrum gravida. Maecenas quis felis ullamcorper ligula convallis imperdiet sed sed quam. Ut vestibulum rutrum diam ut feugiat. Integer sed suscipit arcu. Nullam gravida diam vel nunc dapibus commodo. Vivamus non ante urna, a sollicitudin nulla. Quisque nulla nulla, blandit blandit adipiscing non, euismod quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum tempus neque, vel venenatis velit viverra non.</p>
                </div>
            </div>
            <div class="tab details">
                <div class="content">
                    <h3>Some content 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed eros magna. Fusce luctus gravida sem, quis dictum nisi rutrum gravida. Maecenas quis felis ullamcorper ligula convallis imperdiet sed sed quam. Ut vestibulum rutrum diam ut feugiat. Integer sed suscipit arcu. Nullam gravida diam vel nunc dapibus commodo. Vivamus non ante urna, a sollicitudin nulla. Quisque nulla nulla, blandit blandit...

CSS

.mv-tabs {
  position: relative;
  margin: 40px auto;
  width: 750px;
}

.mv-tabs input {
  display: none;
}

#tab-1:checked ~ .content-container > .tab:first-child  > .content,
#tab-2:checked ~ .content-container > .tab:nth-child(2) > .content,
#tab-3:checked ~ .content-container > .tab:nth-child(3) > .content {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 1;
}

.mv-tabs .tab-labels {
  position: absolute;
  top: -35px;
}

#tab-1:checked ~ .tab-labels > label:first-child,
#tab-2:checked ~ .tab-labels > label:nth-child(2),
#tab-3:checked ~ .tab-labels > label:nth-child(3) {
  background: #ffffff;
  color: #000000;
}

.mv-tabs label {
  background: #555555;
  position: relative;
  padding: 10px;
  float: left;
  display: block;
  width: 100px;
  color: #fcfcfc;
  margin-right: 5px;
  letter-spacing: 1px;
  text-align: center;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), -2px 0 2px rgba(0, 0, 0, 0.1);
}

.mv-tabs label:after {
  content: "";
  background: white;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
}

.mv-tabs .content-container {
  background: white;
  position: relative;
  left: 0;
  width: 100%;
  height: 370px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
}

.mv-tabs .content-container .content {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 40px;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  transition: all linear 0.3s;
}