JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<script src="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.4.min.js"></script>
<link rel="stylesheet" href="https://keycdn.layerjs.org/libs/layerjs/layerjs-0.6.4.css">
  <div class="opener">
    <a href="#lcollapse.!next">open</a>&nbsp;|
    <a href="#lcollapse.!toggle">toggle</a>
  </div>
  <div lj-type="stage" class="collapse" lj-auto-height="true">
    <!-- Add a stage. -->
    <div id="lcollapse" lj-type="layer" lj-default-frame="!none" lj-transition="inouttop">
      <!-- The layer for the main content -->
      <div lj-type="frame" lj-name="frame1" lj-fit-to="responsive-width">
        <!-- The content frame -->
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
          gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
          elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
          eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
          dolor sit amet.
        </p>
        <a href="#lcollapse.!none">close</a>
        <!-- The link opening the lighbox including animation parameters -->
      </div>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  </p>