JSFiddle - React, Tailwind, and code Playground

by Hamzailyas434

HTML

<section id="Testimonials">
        <div class="Testimonials_top">
            <div class="Testimonials_title">
                <h2>Testimonials</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
        <div class="Testimonials_bottom">
            <div class="testimonials_container">
                <div class="testimonials_container_left">
                    <div class="listing-carousel-button listing-carousel-button-prev"><i class="fa fa-caret-left"
                            style="color: #fff"></i></div>
                </div>

                <div class="testimonials_container_center">
                    <div class="testimonials_content">
                        <div class="testimonials_avatar">
                            <img src="61784903_2448694432083814_109523087682174976_n.jpg" alt="">
                        </div>

                        <div class="testimonials_text_before"><i class="fa fa-quote-right"></i></div>

                        <div class="testimonials_text">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                unknown printer took a galley of type and scrambled it to make a type specimen book.
                            </p>
                            <div class="testimonials_information">
                                <h3>John Doe</h3>
                                <h4>Owner</h4>
                            </div>
                        </div>
                        <div class="testimonials_text_after"><i class="fa fa-quote-left"></i></div>
                    </div>

                    <div class="testimonials_content active">
                        <div class="testimonials_avatar">
                            <img...

CSS

:root {
            --first_color: #15241c;
            --second-color: #09382f;
            --third-color: #FF882E;
            --fourth-color:#E55E2E;
            --fifth-color:#F8F1E0;
            --sixth-color : #EC9937;
        }

        .Testimonials {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            max-width: 100%;
            margin: 40px 0px;
        }

        .Testimonials_title h2 {
            font-size: 42px;
            letter-spacing: -2px;
            font-weight: 700;
            letter-spacing: 0;
            margin-bottom: 30px;
            text-align: center;
            color: var(--first_color);
        }

        .Testimonials_title>p {
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            margin-bottom: 40px;
            font-weight: 300;
            text-align: center;

        }


        .testimonials_container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            position: relative;
        }


        .testimonials_container_center {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .testimonials_content {
            position: relative;
            transition: all .3s ease-in-out;
            transform: scale(0.9);
            opacity: 0.9;
        }

        .testimonials_avatar {
            position: absolute;
            left: 50%;
            top: -30px;
            width: 90px;
            height: 90px;
            margin-left: -45px;
            z-index: 1;
        }

        .testimonials_avatar img {
            width: 90px;
            height: 90px;
            border-radius: 100%;
            border: 6px solid #fff;
            box-shadow: 0 9px 26px...