Dance the Night Away

<link href="https://fonts.googleapis.com/css?family=Montserrat|Sarina" rel="stylesheet">
<center>
<style>
  .dangerzone {height: 229px; width: 450px; border: 1px solid black; background: white; position: relative; margin-top: 25px;}
  .ddanger { position: absolute; top: 11px; left: 11px; height: 206px; width: 425px; border: 1px solid black;}
  .dangertitle {padding-top: 0px; padding-bottom: 0px; padding-left: 10px; padding-right: 10px; background: rgba(0,0,0,.9); height: 35px; width:345px; position: absolute; margin-top: 188px; text-align: right; color: white; font-family: 'Sarina', cursive; font-size: 15px; line-height: 2.2;}
  .dangertitle a {color: white}
  .dangertab {float: left;}
  .dangertab label {display: block; position: absolute; width: 15px; height: 25px; background: rgba(0,0,0,.75); margin-top: 193px; margin-left: 407px; z-index:5;}
  .dangertab [type=radio] {display: none;} 
  .dangercontent {opacity: 0; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s;}
  [type=radio]:checked ~ label {z-index: 5; height: 20px; margin-top: 198px;}
  [type=radio]:checked ~ label ~ .dangercontent {z-index: 4; opacity: 1;}
  .daphne {position: absolute; height: 206px; width: 138px; margin-top: 10px; margin-left: 298px; border: 1px solid black}
  .daphwords {padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; height: 196px; margin-top: 10px; margin-left: 9px; border: 1px solid black; width: 258px; position: absolute; text-align: justify; font-family: 'Montserrat', sans-serif; font-size:10px;}
  .daphnecredit {font-family: 'space mono', monospace; color: black; font-size: 8px; position: absolute; top: 217px; left: 440px;}
  .daphnecredit a {font-family: 'space mono', monospace; color: black; font-size: 8px; text-decoration: none;}

</style>
<div class="dangerzone">
<div class="dangertab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1" style=""></label>
  <div class="dangercontent">
  <div class="ddanger"><img src="https://placehold.it/425x206" style="width:100%; height:100%;"></div>
  <div class="dangertitle">Title here!</div>
  <div class="dangertitle" style="font-size: 12px; margin-top: 5px; margin-left: 131px; text-align: left; height: 25px; width: 300px">@[tag here] // <a href="here">Outfit</a> // Notes</div>
  </div>
</div>
<div class="dangertab">
  <input type="radio" id="tab-2" name="tab-group-1">
  <label for="tab-2" style="width: 15px; margin-left: 422px; background-color: rgba(255,255,255,.75);"></label>
  <div class="dangercontent">
    <div class="daphne"><img src="https://placehold.it/138x206" style="height:100%; width:100%"></div>
    <div class="daphwords">blah, this scrolls yall!</div>
</div>
  </div>
  <div class="daphnecredit"><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></div>
</div>
</center>