JSFiddle - React, Tailwind, and code Playground

by A. Abdul Mustahab Iman Sani

HTML

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
  
<body>
<h1>Table of Contents For Blogger AMP by IDNXMUS</h1> 
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend semper erat eu fringilla. Morbi in varius lorem. Curabitur eros odio, imperdiet sit amet orci sed, sollicitudin vehicula quam. Nullam accumsan posuere malesuada. Donec id dapibus ante. Suspendisse sodales a neque et pretium. Aenean sed risus malesuada, pulvinar velit sed, convallis sapien. Donec a lobortis massa.
<br />
<br />
Nullam quis nibh at dolor malesuada mollis. Vivamus at nulla eu augue porttitor sodales. Proin ut turpis mauris. Ut eleifend tempor ante vel rhoncus. Suspendisse non gravida lorem. Vivamus vel sagittis elit. Pellentesque enim neque, accumsan non suscipit id, congue et neque. Praesent efficitur orci in accumsan porttitor. Curabitur euismod lorem id leo malesuada, a pulvinar sapien posuere.

<div id="toc_wrapper">
<div class="tombol_toc" on="tap:daftarisi.toggleVisibility" role='button' tabindex='0'>DAFTAR ISI...

CSS

body{padding:10px;background:#fff; font:normal 400 14px Arial,sans-serif; line-height:18px;}
h1 {margin: 16px 0;line-height: 1em}

#toc_wrapper{background:#ddd;max-width:450px;position:relative;padding:10px;border-radius:4px;margin:20px auto}

.tombol_toc{position: relative;font-weight: bold;outline: none;}
.tombol_toc svg{float:right}

#daftarisi{background:#fff;padding:10px 10px 0;border-radius:4px;margin-top:10px;-webkit-box-shadow: 0 2px 15px rgba(0,0,0,.05);box-shadow:0 2px 15px rgba(0,0,0,.05)}

#daftarisi a{text-decoration:none;}

#daftarisi ul{padding:0 0 0 20px;margin:0}
#daftarisi ul li.lvl1{line-height:1.8em;padding:4px 0}
#daftarisi ul li.lvl1:nth-child(n+2){border-top:1px dashed #ddd
}
#daftarisi ul li.lvl1 a{font-weight:600}
#daftarisi ul li.lvl2 a{font-weight:400}
#daftarisi ul li a:hover{text-decoration:underline}

:target::before{content:"";display:block;height:40px;margin-top:-40px;visibility:hidden}