JSFiddle - React, Tailwind, and code Playground

by xitij2000

HTML

<div class = "fallback-message">
    <p>impress.js not supported</p>
</div>
<div id = "impress">
    <div class = "step" data-scale="20">
        Slide 1
    </div>
    <div class = "step" >
        <h2> impress.js is awesome!</h2>
        <p> It can do a number of awesome things, such as: </p>
        <ul>
            <li>This thing</li>
            <li>That thing</li>
            <li>Another thing</li>
            <li>One more thing</li>
        </ul>
    </div>
</div>

<script src = "https://raw.github.com/bartaz/impress.js/master/js/impress.js"></script>
<script>impress().init();</script>

CSS

.impress-supported .fallback-message {
    display: none;
}
.step {
    width: 400px;
    height: 300px;
    padding: 20px;
    margin: 10px;
    border: 4px solid black;
      font-size: 1.2em;
    line-height: 1.4em;
}

.step h2 {
  text-shadow: 4px 4px 3px #999999;
  font-size: 1.8em;
    line-height:1.9em;
}

.step ul {
  list-style-type: square;
  font-size: 1.4em;
  text-align: left;
  line-height: 1.5em;
  list-style-position: inside;
}