JSFiddle - React, Tailwind, and code Playground

by kvazarmw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<div class="r">
         <table class="table-white">
            <tbody>
            <tr>
                <td>Massage ID:</td>
                <td>[email protected]</td>
            </tr>
            <tr class="more-info">
                <td>Massage Header:</td>
                <td><span class="click-more-info">CLICK TO VIEW</span>
                    <div class="more-info-block">

                        <p>Hello, <br>
                            I am Daniel, Manager (Marketing Department)</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio dolorum explicabo fugit id nihil non quaerat.</p>
                    </div>
                </td>
            </tr>
            <tr class="more-info">
                <td>Massage Preview:</td>
                <td><span class="click-more-info">CLICK TO VIEW</span>
                    <div class="more-info-block">

                        <p>Hello, <br>
                            I am Daniel, Manager (Marketing Department)</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, distinctio dolorum explicabo fugit id nihil non quaerat.</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Sending Server:</td>
                <td>mail.cyber2.comcast.net</td>
            </tr>
            <tr>
                <td>Sending Server IP:</td>
                <td>25.55.63.2</td>
            </tr>
            <tr>
                <td>Virus Scan:</td>
                <td>PASS</td>
            </tr>
            <tr>
                <td>Exception List:</td>
                <td>SKIPPED (No match against black or white list)</td>
            </tr>
            <tr>
               ...

CSS

body {
            background: black;
            color: beige;
        }
        td {
            border: 1px solid red;
            height: 40px;
        }
        .more-info-block {
            display: none;
        }
        .click-more-info {
            cursor: pointer;
            color: darkblue;
        }
        .r {
            max-height: 400px;
            overflow-y: scroll;
        }

JavaScript

$('.click-more-info').click(function() {
            
  $(this).siblings('.more-info-block').slideToggle();

});

$('.r').niceScroll({
  cursorcolor: "yellow",
  cursorwidth: "10px",
  cursorborder: '1px solid red',
  cursorborderradius: '15',
  autohidemode: false,
  cursorminheight: 32
});