JSFiddle - React, Tailwind, and code Playground

by L_Diaz

HTML

<html>
  <body>
    <div className="App">
      <h1>This is a fixed navbar</h1>
      <p>item</p>
      <p class="drag1" draggable="true">
        This is a draggable paragraph. Drag this element to the bottom.
      </p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p>item</p>
      <p class="drag1" draggable="true" ondragstart="drag(event)">
        This is a draggable text. Drag this element to the top.
      </p>
    </div>
  </body>
</html>

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}


h1 {
  background-color: teal;
  width: 100%;
  position: fixed;
  z-index: 100;
  top: -25px;
  height: 50px;
}