JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="container">
    <div class="row">
        <div class="grid_container_">
            <div class="about_top_title pages_top_title grid_container">
                <img src="<?= ROOT_URL.'uploads/banners/'.$data->banner->image ?>" alt="<?= L('_Doctors_') ?>">
                <div class="about_page_title doctors_top_page_title">
                    <?= L('_Doctors_') ?>
                    <div><svg xmlns="http://www.w3.org/2000/svg" width="60" height="60.081" viewBox="0 0 60 60.081">
                            <path id="Path_295" data-name="Path 295" d="M974.308,548.393a7.508,7.508,0,0,0-1.941,14.761v.672a12.025,12.025,0,0,1-24.05,0V551.76a20.02,20.02,0,0,0,18.4-19.928v-8.3h2.952a1.941,1.941,0,1,0,0-3.882h-4.893a1.941,1.941,0,0,0-1.941,1.941v10.239a16.116,16.116,0,1,1-32.232,0v-10.24a1.941,1.941,0,0,0-1.941-1.941h-4.9a1.941,1.941,0,0,0,0,3.882h2.961v8.3a20.024,20.024,0,0,0,17.712,19.864v12.131a15.907,15.907,0,0,0,31.815,0v-.672a7.507,7.507,0,0,0-1.941-14.76Zm0,11.142a3.63,3.63,0,1,1,3.63-3.63A3.634,3.634,0,0,1,974.308,559.535Z" transform="translate(-921.821 -519.651)" fill="#fff" />
                        </svg>
                    </div>
                </div>
                <div class="banner_log">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="271.091" height="212.963" viewBox="0 0 271.091 212.963">
                        <defs>
                            <clipPath id="clip-path">
                                <rect id="Rectangle_10" data-name="Rectangle 10" width="271.091" height="212.963" transform="translate(0 215)" fill="#009c9c" />
                            </clipPath>
                        </defs>
                        <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(0 -215)" clip-path="url(#clip-path)">
                            <path id="Path_130" data-name="Path 130"...