JSFiddle - React, Tailwind, and code Playground

by stofke

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  
  <head>
    <title>CSS3 Chrome Tabs</title>
    <!--Tabs Style Sheet Foundation and Theme-->
    <link href="tabs.css" type="text/css" rel="stylesheet">
    <style type="text/css">
      /* Basic and Extras */
      body {
        background-color: #BADA55;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
        background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, .5) 70px);
      }
      #container {
        background-color: #9c9c9c;
        padding: 1px;
        max-width: 960px;
        margin: 5px auto;
        border-radius: 4px;
        box-shadow: 0 2px 3px #444;
      }
      .wrap {
        padding: 0;
        margin: 0;
        -o-border-radius: 2px;
        border-radius: 2px;
        overflow: hidden;
      }
      .window {
        height: 100%;
        width: 100%;
        border: 0;
        background-color: #fff;
      }
      .search {
        border-radius: 4px;
        border: 1px solid #9c9c9c;
        line-height: 25px;
        height: 25px;
        background-color: #fff;
        margin: 5px;
        box-shadow: inset 0 1px 1px #ccc, 0 1px 1px #fff;
        width: 500px;
        padding-left: 25px;
        background-image: url(default.png);
        background-repeat: no-repeat;
        background-position: 5px 5px;
      }
      .home {
        width: 25px;
        height: 25px;
        background-image: url(home.png);
        background-repeat: no-repeat;
        background-position: center;
        float: left;
        margin: 5px;
        border-radius: 4px;
        border: 1px solid transparent;
      }
      .home:hover {
        background-color: rgba(255, 255, 255, .3);
        border-color: #9c9c9c;
      }
      .test {
       ...

CSS

/* Tab Structure */
 .tab-list {
  list-style-type: none;
  overflow: hidden;
  height: 35px;
  margin: 0;
  padding: 0;
}
.tab-list li {
  margin-top: 10px;
  height: 60px;
  width: 225px;
  position: relative;
  float:left;
  border-top-right-radius: 20px 60px;
  border-top-left-radius: 20px 60px;
  border: 1px solid transparent;
  margin-left: -25px;
  z-index: 1;
}
.tab-list li:first-child {
  margin-left: 0;
}
.tab-list .current {
  z-index: 2;
}
.left-mask, .right-mask {
  width: 10px;
  height: 3px;
  overflow: hidden;
  position: absolute;
  top: 20px;
}
.current .left-mask, .current .right-mask {
  height: 4px;
}
.left-mask {
  left: -1px;
}
.right-mask {
  right: -1px;
}
.left-mask span, .right-mask span {
  display: block;
  width: 9px;
  height: 9px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff;
  border-radius: 10px;
}
.left-mask span {
  margin: -10px -9px;
}
.right-mask span {
  margin: -10px 0px;
}
.tab-list li a {
  display: block;
  float: left;
  line-height: 25px;
  padding-left: 40px;
  font-family: sans-serif;
  font-size: 13px;
  background-image: url(default.png);
  background-repeat: no-repeat;
  background-position: 18px center;
  color: #444;
  text-decoration: none;
}
/*
  
Theme For Tabs - based off of Chrome Default on MacOS X

Gradients Generated by: http://www.colorzilla.com/gradient-editor/

*/
 .tab-list {
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #9c9c9c;
  background: rgb(207, 207, 207);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(207, 207, 207, 1) 0%, rgba(176, 176, 176, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(207, 207, 207, 1)), color-stop(100%, rgba(176, 176, 176, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(207, 207, 207, 1) 0%, rgba(176, 176, 176, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(207, 207, 207, 1) 0%, rgba(176, 176, 176, 1)...

JavaScript

var _0x4311 = ["\x68\x72\x65\x66", "\x61\x74\x74\x72", "\x61", "\x66\x69\x6E\x64", "\x63\x75\x72\x72\x65\x6E\x74", "\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73", "\x63\x68\x69\x6C\x64\x72\x65\x6E", "\x73\x69\x62\x6C\x69\x6E\x67\x73", "\x70\x61\x72\x65\x6E\x74", "\x6C\x69", "\x61\x64\x64\x43\x6C\x61\x73\x73", "\x6C\x6F\x67", "\x73\x72\x63", "\x2E\x77\x69\x6E\x64\x6F\x77", "\x76\x61\x6C", "\x2E\x73\x65\x61\x72\x63\x68", "\x70\x72\x65\x76\x65\x6E\x74\x44\x65\x66\x61\x75\x6C\x74", "\x63\x6C\x69\x63\x6B", "\x72\x65\x6C", "\x64\x65\x66\x61\x75\x6C\x74\x2E\x70\x6E\x67", "\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x65\x66\x74\x2D\x6D\x61\x73\x6B\x22\x3E\x0D\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x73\x70\x61\x6E\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x0D\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2F\x64\x69\x76\x3E\x0D\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x72\x69\x67\x68\x74\x2D\x6D\x61\x73\x6B\x22\x3E\x0D\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x73\x70\x61\x6E\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x0D\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x3C\x2F\x64\x69\x76\x3E", "\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x69\x6D\x61\x67\x65", "\x75\x72\x6C\x28", "\x29", "\x63\x73\x73", "\x61\x70\x70\x65\x6E\x64",...