JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

    <input type="hidden" name="isUser" value="True">
    <label>You can erase or add to this scratchpad:</label>
    <textarea name="scratchpad">Screech</textarea>
    <br/>
    <input type="submit" value="save" />

    <div class="reminders">
      <div class="element" ondblclick="toggle('Tennis','Z M V')">
        <p class="sticky taped" style="width: 250px;">
          <big id="Tennisitem">Z</big>
          <br/>
          <span id="Tennisdate">Month Day WDay </span>
          <br /> Z|M|V
          <br /> Tennis
          <br /> (
          <a href="/edit/Brian/5852562955698176">edit </a>)
          <br />
          <input type="hidden" name="Tennischoice" id="Tennischoice" value=0>
          <input type="hidden" name="Tennismonth" id="Tennismonth" value="None">
          <input type="hidden" name="Tennisday" id="Tennisday" value="0">
          <input type="hidden" name="Tennisweekday" id="Tennisweekday" value="None">
          <input type="hidden" name="Tennisdate" id="Tennisdate" value="">
      </div>

      <div class="reminders">
        <div class="element" ondblclick="toggle('Bridge','B C')">
          <p class="sticky taped" style="width: 250px;">
            <big id="Bridgeitem">B</big>
            <br/>
            <span id="Bridgedate">Month Day WDay </span>
            <br /> B|C
            <br /> Bridge
            <br /> (
            <a href="/edit/Brian/5878607637381120">edit </a>)
            <br />
            <input type="hidden" name="Bridgechoice" id="Bridgechoice" value=0>
            <input type="hidden" name="Bridgemonth" id="Bridgemonth" value="None">
            <input type="hidden" name="Bridgeday" id="Bridgeday" value="0">
            <input type="hidden" name="Bridgeweekday" id="Bridgeweekday" value="None">
            <input type="hidden" name="Bridgedate" id="Bridgedate" value="">
        </div>
  </div>

CSS

.wrapper {
  text-align: center;
  padding: 10px;
  margin: 40px;
}

h1 {
  font-size: 20px;
}

.emph {
  font-weight: bold;
}

.sticky {
  display: inline-block;
  -webkit-box-shadow: #DDD 0px 1px 2px;
  background-color: #F4F39E;
  border-color: #DEE184;
  text-align: center;
  margin: 2.5em 0px;
  padding: 1.5em 1em;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  font-family: Chalkboard, 'Comic Sans';
}

.sticky:first-line {
  font-size: 60px;
}

.sticky.taped:after {
  content: "";
  position: absolute;
  width: 151px;
  height: 35px;
  top: -21px;
  left: 25%;
  background: transparent url(tape.png) 0 0 no-repeat;
}