Hitman (pestañas)

<div class="MM052"><div class="MM052-top"><div class="MM052-img" style="background-image: url(https://i.postimg.cc/mZNt2QnN/07.png);"></div>
<div class="MM052-in"><span><b>00</b>The Hitman</span>
<div class="MM052-txt">Liquorice muffin cotton candy cotton candy topping sugar plum marshmallow sweet. Wafer dessert croissant gummi bears. Dragée carrot cake tiramisu pudding oat cake cotton candy powder chupa chups.

Biscuit lemon drops lemon drops pudding chocolate chocolate cake cupcake cupcake. Soufflé gingerbread jelly-o lemon drops chocolate cake chocolate bar marshmallow muffin. Cupcake sweet powder marshmallow.</div>
</div></div>

<label><input type="checkbox"><div class="MM052-tt">
<span><b>01</b>Primero</span>
<div>edad, grupo o frase</div></div>
<div class="MM052-hd"><div><div>Detalles:</div>
Muffin liquorice liquorice gummies. Bear claw oat cake tiramisu brownie halvah pastry tootsie roll jelly beans. Tiramisu jelly beans croissant jelly sugar plum. Candy canes cupcake cake dessert chocolate bar brownie jelly-o.</div></div>
</label>


<label><input type="checkbox"><div class="MM052-tt">
<span><b>02</b>Segundo</span>
<div>edad, grupo o frase</div></div>
<div class="MM052-hd"><div><div>Detalles:</div>
Muffin liquorice liquorice gummies. Bear claw oat cake tiramisu brownie halvah pastry tootsie roll jelly beans. Tiramisu jelly beans croissant jelly sugar plum. Candy canes cupcake cake dessert chocolate bar brownie jelly-o.</div></div>
</label>


<label><input type="checkbox"><div class="MM052-tt">
<span><b>03</b>Tercero</span>
<div>edad, grupo o frase</div></div>
<div class="MM052-hd"><div><div>Detalles:</div>
Muffin liquorice liquorice gummies. Bear claw oat cake tiramisu brownie halvah pastry tootsie roll jelly beans. Tiramisu jelly beans croissant jelly sugar plum. Candy canes cupcake cake dessert chocolate bar brownie jelly-o.</div></div>
</label>


</div><a class="miMM" href="https://emmescodes.tumblr.com/" title="Code by Emme">Emme</a><link href="https://fonts.googleapis.com/css?family=Arimo|Lora" rel="stylesheet"><style>.MM052, .MM052 * { box-sizing: border-box; scrollbar-color: #FFF2 #FFF2 !important; scrollbar-width: thin; transition: .5s; } .MM052 input, .MM052 br { display: none; } .MM052 { width: 520px; margin: auto; background: #222; padding: 30px; color: #CCC; font: 10px Arimo; } .MM052-top { display: flex; } .MM052-img { width: 150px; background-position: center; background-size: cover; } .MM052-in { margin-left: 10px; border-left: 1px dotted; padding: 10px 0 10px 30px; flex: 1; } .MM052-tt > span, .MM052-in > span { font: 12px Lora; text-transform: uppercase; letter-spacing: 2px; display: flex; } .MM052-tt > span > b, .MM052-in > span > b { margin-right: auto; } .MM052-txt { padding: 20px; text-align: justify; hyphens: auto; letter-spacing: 1px; margin-top: 10px; } .MM052 label { margin: 0; padding: 0; color: inherit; } .MM052-tt { margin-top: 50px; cursor: crosshair; } .MM052-tt:hover { color: #FFF; } .MM052-tt > span { border-bottom: 1px dotted; padding: 0 10px 5px; } .MM052-tt > div { text-align: center; padding: 5px; letter-spacing: 2px; } .MM052-hd { padding: 0 20px; display: flex; height: 0px; overflow: hidden; } .MM052 input:checked ~ .MM052-hd { height: 150px; padding: 20px; } .MM052-hd > div { max-height: 100%; overflow: auto; text-align: justify; hyphens: auto; letter-spacing: 1px; } .MM052-hd > div > div { font: bold 10px Lora; text-transform: uppercase; letter-spacing: 3px; } .MM052-hd > div br, .MM052-txt br { display: block; } .MM052-hd > div bt + br, .MM052-txt br + br { margin: 5px; } .MM052 div::-webkit-scrollbar { width: 5px !important; height: 5px !important; background: #FFF2 !important; } .MM052 div::-webkit-scrollbar-thumb { background: #FFF2 !important; } .miMM { display: block; font: bold 10px Calibri; letter-spacing: 2px; text-align: center; transition: 0.5s; text-transform: uppercase; padding: 3px; color: #444; } .miMM:hover { letter-spacing: 3px; }</style>