<link href="https://fonts.googleapis.com/css?family=Kumar+One|Roboto" rel="stylesheet">
<center><style>
 .jenito {
   height: 600px;
   width: 505px;
   position: relative;
   overflow: hidden;
   background-color: white;}
 .jenitoline{
   width: 505px;
   height: 3px;
   background-color: #30447A;
   position: absolute;
   top: 300px;
   border-radius: 250px;}
  .tab {float: left;}
  .tab label {
   display: block;
   position: absolute;
   width: 15px;
   height: 15px;
   background-color: #A86200;
   top: -6px;
   left: 92px;
   border-radius: 100%;
   font-family: 'Kumar One', cursive;
   color: white;
   font-size: 8px;
   line-height: 2;
   text-align: center;
   z-index: 7;}
  .tab [type=radio] {display: none;}
  .content { -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s;}
  [type=radio]:checked ~ label {background-color: #E38400; top: -6px; height: 15px; width: 15px; color: black; line-height: 2; z-index: 6; border-radius: 100%;}
  [type=radio]:checked ~ label ~ .content { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1);}
  #box1 {
    position: absolute;
    height: 225px;
    width: 200px;
    background-color: #90C3D4;
    top: -285px;
    left: 0px;}
  #box1:after {
    border-top: 50px solid #90C3D4;
    border-left: 100px solid white;
    border-right: 100px solid white;
    content: "";
    height: 0px;
    left: 0px;
    position: absolute;
    top: 225px;
    width: 0px;}
  #box2 {
    position: absolute;
    height: 225px;
    width: 200px;
    background-color: #90C3D4;
    top: 63px;
    left: 107px;}
  #box2:before{
    border-bottom: 50px solid #90C3D4;
    border-left: 100px solid white;
    border-right: 100px solid white;
    content:"";
    height: 0px;
    left: 0px;
    position: absolute;
    top: -50px;
    width: 0px;}
  .boxyinfo {
    height: 185px;;
    width: 150px;
    padding: 10px;
    background: white;
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    text-align: justify;
    line-height: 1;
    overflow: auto;}
  .boxyinfo h1 {font-family: 'Kumar One', cursive; font-size: 15px; text-align: center; text-transform: capitalize;}
  .boxyinfo a {color: #E38400;}
  .boxyinfo a:hover {color: #90C3D4}
  .boxycredit {font-family: 'space mono', monospace; color: #90c3d4; font-size: 8px; position: absolute; top: 288px; z-index: 5; left: 5px;}
  .boxycredit a {font-family: 'space mono', monospace; color: #90c3d4; font-size: 8px; text-decoration: none;}
</style>
<div class="jenito">
  <div class="jenitoline">
    <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1" style="z-index:7">I</label>
      <div class="content">
        <div id="box1">
         <div class="boxyinfo">
           <h1>Title here</h1>
           <hr>
<center>Subtitle</center>
           Anything else here! This will scroll so don't worry!</div>
        </div>
      </div>
    </div>
    <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2" style="z-index:7; left: 200px;">II</label>
      <div class="content">
        <div id="box2">
          <div class="boxyinfo" style="top: 5px;">
           <h1>Title here</h1>
           <hr>
<center>Subtitle</center>
           Anything else here! This will scroll so don't worry!</div>
        </div>
      </div>
    </div>
    <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-1">
    <label for="tab-3" style="z-index:7; left: 300px;">IIV</label>
    <div class="content">
      <div id="box1" style="left: 208px;">
        <div class="boxyinfo">
           <h1>Title here</h1>
           <hr>
<center>Subtitle</center>
           Anything else here! This will scroll so don't worry!</div>
      </div>
    </div>
    </div>
    <div class="tab">
    <input type="radio" id="tab-4" name="tab-group-1">
    <label for="tab-4" style="z-index:7; left: 400px;">IV</label>
     <div class="content">
       <div id="box2" style="left: 306px;">
         <div class="boxyinfo" style="top: 5px;">
           <h1>Title here</h1>
           <hr>
<center>Subtitle</center>
           Anything else here! This will scroll so don't worry!</div>
       </div>
     </div>
    </div>
  </div>
  <div class="boxycredit"><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></div>
</div></center>