JSFiddle - React, Tailwind, and code Playground

by Kofod

HTML

<div>
  <div
    class="textbox"
    style="
      overflow: auto;
      position: absolute;
      width: 340px;
      height: 200px;
      top: 190px;
      left: 90px;
      margin-right: -230px;
      margin-bottom: -319px;
      text-align: center;
    "
  >
    <div style="text-align: center">
      <span
        style="
          text-align: center;
          font-family: Verdana, times;
          font-style: italic;
          color: #782a00;
          font-size: small;
        "
        >We are bringing back Monthly Magazine!<br />Don&rsquo;t know what
        Monthly Magazine is?<br /><br /><a
          target="_blank" href="https://en.virtualpopstar.com/home/profile?user=NewsTeam&amp;show=blog&amp;id=20474"
          >Click here!</a
        ><br /><br />This month a group of the VP users have gathered to bring
        this magazine to life for November. In the future we are hoping for your
        help as well!<br /><br
      /></span>
    </div>
    <div
      style="
        font-family: &quot;Times New Roman&quot;;
        font-size: medium;
        text-align: center;
      "
    >
      <span
        style="
          font-size: small;
          font-family: &quot;times new roman&quot;, times;
        "
        ><strong>How can you help, you might wonder?</strong></span
      >
    </div>
    <div style="text-align: center">
      <ul
        style="
          font-family: &quot;Times New Roman&quot;;
          font-size: medium;
          text-align: center;
        "
      >
        <li style="text-align: left">
          <span
            style="
              font-size: small;
              font-family: &quot;times new roman&quot;, times;
            "
            >Send in page ideas</span
          >
        </li>
        <li style="text-align: left">
          <span
            style="
              font-size: small;
              font-family: &quot;times new roman&quot;, times;
            "
            >Nominate members of the month, within...

CSS

/* How to make custom scrollbar */
/* Customize shape of scrollab */
.textbox::-webkit-scrollbar {
    width: 8px;
}

/* The area behind scrollbar */
.textbox::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* Customize the bar moving inside the tracker */
.textbox::-webkit-scrollbar-thumb {
    background-color: #ffc249; 
    border-radius: 5px;
}

/* Scrollbar reacts to hover */
.textbox::-webkit-scrollbar-thumb:hover {
    background-color: #000000;
}