JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<main class="content-container">

            <div class="card">
                <img src="https://res.cloudinary.com/mo1/image/upload/v1564584621/kobe_lq48jt.jpg" alt="">
                <strong><p>Kobe Bryant </p></strong>
                <div class="mentor-info">
                        <input type="checkbox" id="check_id"> 
                        <label for="check_id"></label>
                    <ul>
                        <li>Bio: A 44-year old husband and father of 2.</li><br>
                        <li>Occupation: Retired professional basketball player</li><br>
                        <li>Expertise: 5 years</li><br>
                    </ul>
                </div>
            </div>

            <div class="card">
                <img src="https://res.cloudinary.com/mo1/image/upload/v1564584373/kiyosaki_ccrd22.jpg" alt="">
                <strong><p>Robert Kiyosaki</p></strong>
                <div class="mentor-info">
                        <input type="checkbox" id="check_id1"> 
                        <label for="check_id1"></label>
                    <ul>
                        <li>Bio: A 53-year old husband and enthusiastic writer</li><br>
                        <li>Occupation: Professional Economist</li><br>
                        <li>Expertise: 5 years</li><br>
                    </ul>
                </div>
            </div>
            <div class="card">
                <img src="https://res.cloudinary.com/mo1/image/upload/v1564614348/lupita_hehsru.jpg" alt="">
                <strong><p>Lupita Nyo'ongo</p></strong>
                <div class="mentor-info">
                        <input type="checkbox" id="check_id2"> 
                        <label for="check_id2"></label>
                    <ul>
                        <li>Bio: Born and raised in Kenya. She is now 30 years-old </li><br>
                        <li>Occupation: Professional Actress</li><br>
                        <li>Expertise: 5 years</li><br>
                   ...

CSS

/* Toggler styles */

    .mentor-info {
        position: relative;
    }

    [type="checkbox"] {
        position: absolute;
        visibility: hidden;
    }

    label {
        /* display: block; */
        width: 100%;
        height: 50px;
        cursor: pointer;
        position: absolute;
        top: 0;
        transition: top .45s cubic-bezier(.44, .99, .48, 1);
    }

    label:before,
    label:after {
        position: absolute;
    }

    label:before {
        content: 'Show More';
        left: 5px;
        color: #008000;
    }

    input[type="checkbox"]~ul {
        width: 100%;
        overflow: hidden;
        max-height: 0;
        transition: max-height .45s cubic-bezier(.44, .99, .48, 1);
    }

    [type="checkbox"]:checked~ul {
        max-height: 300px;
    }

    [type="checkbox"]:checked+label {
        top: 100%;
    }

    [type="checkbox"]:checked +label:before {
        content: ' Show Less';
    }

    ul li:last-child {
        margin-bottom: 50px;
    }