Posts Learn Components Snippets Categories Tags Tools About
/

Tailwind CSS Basic Features Component 

<div class="container mx-auto p-4 lg:p-12 bg-white">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div class="p-4 lg:p-12 rounded-2xl overflow-hidden bg-blue-50">
            <div class="flex items-center text-blue-500">
                <p class="text-sm font-bold uppercase">
                    Feature 1 & Feature 2
                </p>

                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </div>

            <h2 class="mt-4 text-3xl font-semibold text-slate-800">
                This is an Amazing Feature
            </h2>

            <p class="mt-4 text-lg text-slate-600">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

        
            <div class="mt-12 flex justify-center items-center hover:scale-125 transform ease-in-out duration-150 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[300px] h-auto" viewBox="0 0 511.56264 532.44842" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="454.49103 405.20843 454.48102 405.44842 466.49103 532.44842 378.85101 532.44842 367.49103 454.44842 362.49103 530.44842 272.49103 529.44842 282.05103 429.66839 290.18103 383.41839 290.18103 383.40838 291.401 376.44842 452.10101 376.44842 452.31103 378.96838 454.49103 405.20843" fill="#2f2e41"/><path d="M222.88285,478.83064c9.28179,1.69101,18.96019-8.76188,21.61758-23.34779,1.16327-6.38475,.78778-12.50277-.78019-17.50611l1.42323-8.40799,23.88334-113.10923s43.98031-87.97522,43.9791-103.24828c-.00111-15.27287-12.72223-22.76282-12.72223-22.76282l-17.21435,.16096-53.98264,131.84662-9.72217,97.42982-1.57289,13.36711c-3.2316,4.12897-5.74053,9.72145-6.90332,16.10621-2.65749,14.58572,2.71275,27.78048,11.99454,29.4715Z" fill="#ffb6b6"/><polygon points="397.99103 135.94842 381.99103 98.94842 329.99103 107.94842 326.49103 151.47992 397.99103 135.94842" fill="#ffb6b6"/><polygon points="397.99103 135.94842 381.99103 98.94842 329.99103 107.94842 326.49103 151.47992 397.99103 135.94842" opacity=".1"/><path d="M510.99121,212.9484s-37-69-44-76c-3.11621-3.11621-8.01465-3.15955-12.49316-2.25134l-51.50684-17.74866-17.45801-9.8092-1.15039,18.66199-57.31543,10.28748c.31836-11.38086,1.92383-15.70972,1.92383-15.70972l-21,24.56946-41,20,.02246,.18005c-3.00879,1.05029-5.86133,2.84741-8.02246,5.81995-8,11-30,145-30,145l47,10,6.39648-40.13953,4.60352,36.13953,3.5,67.5s64,55,95,35,69-19,69-19l.94824-31.28796c.6748-1.07861,1.05176-1.71204,1.05176-1.71204l-1-110.98425v-29.5321c7.61816,10.61353,16.81152,19.74109,27.5,24.01636,35,14,28-43,28-43Z" fill="#e6e6e6"/><circle cx="350.55585" cy="66.61991" r="47.83848" fill="#ffb6b6"/><path d="M384.87476,80.13948s4.15987-14.55954,13.51957-13.51957c9.3597,1.03997,11.43964-7.27977,9.3597-11.43964-2.07993-4.15987-6.2398-24.95921-6.2398-24.95921,0,0,2.07993-14.55954-10.39967-16.63947-12.4796-2.07993-16.63947-4.15987-18.71941-8.31974-2.07993-4.15987-33.27894-8.31974-43.67861-2.07993-10.39967,6.2398-18.71941,18.2117-25.99917,21.58546-7.27977,3.37375-13.51957,9.61355-9.3597,20.01322,4.15987,10.39967,10.19286,30.7392,10.19286,30.7392,0,0,10.60648-3.70006,12.68641,2.53974,2.07993,6.2398-6.2398-2.07993,4.15987-18.71941,10.39967-16.63947,10.39967-33.27894,27.03914-27.03914,16.63947,6.2398,35.35888,4.15987,33.27894,16.63947-2.07993,12.4796,4.15987,31.19901,4.15987,31.19901Z" fill="#2f2e41"/><g><path d="M381.94946,459.38422H18.63322c-10.27456,0-18.63322-8.35942-18.63322-18.63322V247.758c0-10.2738,8.35866-18.63322,18.63322-18.63322H381.94946c10.27456,0,18.63322,8.35942,18.63322,18.63322v192.993c0,10.2738-8.35866,18.63322-18.63322,18.63322Z" fill="#fff"/><path d="M381.94946,459.38422H18.63322c-10.27456,0-18.63322-8.35942-18.63322-18.63322V247.758c0-10.2738,8.35866-18.63322,18.63322-18.63322H381.94946c10.27456,0,18.63322,8.35942,18.63322,18.63322v192.993c0,10.2738-8.35866,18.63322-18.63322,18.63322ZM18.63322,232.23639c-8.55846,0-15.52161,6.96315-15.52161,15.52161v192.993c0,8.55846,6.96315,15.52161,15.52161,15.52161H381.94946c8.55846,0,15.52161-6.96315,15.52161-15.52161V247.758c0-8.55846-6.96315-15.52161-15.52161-15.52161H18.63322Z" fill="#3f3d56"/><circle cx="353.90847" cy="247.79446" r="4.66742" fill="#3f3d56"/><circle cx="366.35492" cy="247.79446" r="4.66742" fill="#3f3d56"/><circle cx="378.80138" cy="247.79446" r="4.66742" fill="#3f3d56"/><path d="M26.44872,323.2511c-1.28688,0-2.33371,1.04683-2.33371,2.33371,0,.62749,.24234,1.20788,.68218,1.63633,.44365,.45428,1.0248,.69738,1.65153,.69738H375.68976c1.28688,0,2.33371-1.04683,2.33371-2.33371,0-.62749-.24234-1.20788-.68218-1.63633-.44365-.45428-1.0248-.69738-1.65153-.69738H26.44872Z" fill="#e6e6e6"/><path d="M332.12717,322.4732v6.22323H26.44872c-.85567,0-1.63358-.34233-2.19365-.91797-.57574-.56007-.91797-1.33797-.91797-2.19365,0-1.71144,1.40026-3.11161,3.11161-3.11161H332.12717Z" fill="#cde7ff"/><path d="M371.80025,310.80464h-31.11614c-3.43144,0-6.22323-2.79103-6.22323-6.22323s2.79179-6.22323,6.22323-6.22323h31.11614c3.43144,0,6.22323,2.79103,6.22323,6.22323s-2.79179,6.22323-6.22323,6.22323Z" fill="#e6e6e6"/><path d="M167.98953,278.1327H28.78243c-3.43144,0-6.22323-2.79103-6.22323-6.22323s2.79179-6.22323,6.22323-6.22323H167.98953c3.43144,0,6.22323,2.79103,6.22323,6.22323s-2.79179,6.22323-6.22323,6.22323Z" fill="#e6e6e6"/><path d="M26.44872,393.26242c-1.28688,0-2.33371,1.04683-2.33371,2.33371,0,.62749,.24234,1.20788,.68218,1.63633,.44365,.45428,1.0248,.69738,1.65153,.69738H375.68976c1.28688,0,2.33371-1.04683,2.33371-2.33371,0-.62749-.24234-1.20788-.68218-1.63633-.44365-.45428-1.0248-.69738-1.65153-.69738H26.44872Z" fill="#e6e6e6"/><path d="M212.33003,392.48451v6.22323H26.44872c-.85567,0-1.63358-.34233-2.19365-.91797-.57574-.56007-.91797-1.33797-.91797-2.19365,0-1.71144,1.40026-3.11161,3.11161-3.11161H212.33003Z" fill="#cde7ff"/><path d="M371.80025,380.81596h-31.11614c-3.43144,0-6.22323-2.79103-6.22323-6.22323s2.79179-6.22323,6.22323-6.22323h31.11614c3.43144,0,6.22323,2.79103,6.22323,6.22323s-2.79179,6.22323-6.22323,6.22323Z" fill="#e6e6e6"/></g><g><ellipse cx="426.27357" cy="70.44086" rx="48.72643" ry="47.69976" fill="#cde7ff"/><path d="M442.81136,46.3808c-6.487,11.81215-12.97405,23.62439-19.46106,35.43659-4.13442-7.30499-8.24624-14.62285-12.39083-21.92211-1.43136-2.5209-5.32473-.25351-3.88976,2.27368,4.80448,8.46149,9.55919,16.95111,14.36367,25.41259,.82147,1.44676,3.07677,1.48035,3.8898,0,7.12599-12.9757,14.25199-25.95141,21.37798-38.92707,1.39635-2.54258-2.4924-4.81822-3.8898-2.27368Z" fill="#fff"/></g><path d="M493.53827,196.17181l-48.54724-23.22339s-1.94983-15.5437-11.05402-21.08789c-1.54779-3.6925-3.32855-7.74908-4.94598-10.96332-4-7.94879,2-22.94879-3-22.94879s-12.39122,15.77543-12,20c.30031,3.24292,2.98059,8.90472,3.5343,13.8609-6.09709,2.29949-11.01564,6.24084-14.24964,9.37903-2.79865,2.71575-3.8385,6.76755-2.74475,10.51073,3.16948,10.84703,11.09153,33.24933,22.46008,33.24933,15,0,19-3,19-3,0,0,31,39,54,42s-2.45276-47.77661-2.45276-47.77661Z" fill="#ffb6b6"/></svg>
            </div>
        </div>

        <div class="p-4 lg:p-12 rounded-2xl overflow-hidden bg-pink-50">
            <div class="flex items-center text-pink-500">
                <p class="text-sm font-bold uppercase">
                    Feature 3 & Feature 4
                </p>

                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </div>

            <h2 class="mt-4 text-3xl font-semibold text-slate-800">
                This is an Amazing Feature
            </h2>

            <p class="mt-4 text-lg text-slate-600">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

            <div class="mt-12 flex justify-center items-center hover:scale-125 transform ease-in-out duration-150 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[300px] h-auto" viewBox="0 0 642.99652 699.63871" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M526.36927,329.63871c19.90002,12.82996,38.54004,30.01001,56,51.20001v32.39996c-8.52002-2.89996-41.03998-14.91998-53.88-33.92999-14.83997-21.96997-17.47998-55.32001-5.12-63.66998,3.21997-2.17004,7.13-2.44,11.41998-1.25,13.52997,9.72998,26.47003,21.52997,38.83002,35.27997,4.38,6.73004,7.09009,15.29999,8.75,23.96002v.40997c-15.98999-22.25995-34.79004-36.69995-56-44.39996Z" fill="#ffcdcd"/><path d="M525.36927,130.63871c19.90002,12.82996,38.54004,30.01001,56,51.20001v7.39996c-1.66992-.57001-4.25-1.47998-7.42993-2.72998-14.28003-16.92999-30.56006-28.33002-48.57007-34.87,12.59998,8.12,24.69995,17.98999,36.31006,29.51996-12.28003-5.90997-26.64008-14.66998-34.19006-25.84998-.79999-1.17999-1.56-2.37-2.27997-3.57001-12.70001-21.08002-13.54004-44.20001-1.84003-52.09998,12.35999-8.35004,34.03003,3.47998,48.87,25.44,8.57996,12.70996,10.98999,32.42999,11.47998,46.77997-.78992,1.04004-1.56995,2.10004-2.34998,3.17999-15.98999-22.25995-34.79004-36.69995-56-44.39996Z" fill="#ffcdcd"/><path d="M638.6493,248.84418v.01001c-1.42004,3.92999-3.19995,7.89996-5.32007,11.81-3.1499,5.82001-7.98999,11.21997-13.46997,16.04999-5.87,5.17999-12.48999,9.70001-18.58008,13.37-8.5,5.13-15.96997,8.60999-18.90991,9.92999v-3.14996c16.89001-20.10004,34.84998-36.48004,54-48.82001-20.34009,7.38-38.44995,20.97998-54,41.70996v-13.88995c16.89001-20.10004,34.84998-36.48004,54-48.82001-20.34009,7.38-38.44995,20.97998-54,41.70996v-13.88995c16.66992-19.83002,34.37-36.04004,53.23999-48.32001,8.84009,7.10999,9.60999,24.26001,3.04004,42.29999Z" fill="#ffcdcd"/><circle cx="143.68463" cy="245.54543" r="143.68463" fill="#ff6884"/><path id="uuid-6b4a4d5d-b113-464e-95c4-a63f7642af13-75" d="M593.8654,475.91104c12.08511,10.18033,16.6283,24.66792,10.14821,32.3579-6.48009,7.68998-21.52745,5.66969-33.6155-4.51589-4.88449-4.00249-8.73944-9.11651-11.2423-14.91424l-50.66036-43.78114,21.05193-23.3355,47.70709,45.63794c6.14044,1.48281,11.83636,4.41493,16.61093,8.55093Z" fill="#fcb4b4"/><polygon points="552.95795 443.519 491.02708 363.99382 432.36927 256.63871 430.84826 405.52921 518.77357 477.74514 552.95795 443.519" fill="#2f2e41"/><polygon points="283.55596 224.62355 297.74334 160.11791 345.16338 162.39889 357.33582 209.19408 283.55596 224.62355" fill="#fcb4b4"/><polygon points="283.55596 224.62355 297.74334 160.11791 345.16338 162.39889 357.33582 209.19408 283.55596 224.62355" isolation="isolate" opacity=".1"/><circle cx="320.27975" cy="124.33784" r="53.08847" fill="#fcb4b4"/><path d="M296.53303,144.83965v-.00003s-5.35571-.05192-16.49579-2.12351c-11.14006-2.07163,8.20171,23.95969,8.20171,23.95969-52.42402-21.89015-35.64839-77.41381-35.64839-77.41381-53.20448-10.17499-30.91603-57.47251-30.91603-57.47251,0,0,17.53794-33.84457,71.45114-31.6909,53.91317,2.15367,28.44356,55.32713,28.44356,55.32713,35.12577,.06654,39.07767,31.72302,39.07767,31.72302,0,0-12.66255,1.58075-35.67488,7.42121-23.01226,5.84041-28.43888,50.26964-28.43888,50.26964l-.00007,.00003-.00003,.00003Z" fill="#2f2e41"/><path d="M294.42832,204.30801l-2.39764-4.66929s-42.66142,4.94488-49.66142,11.47244c-7,6.52756-23,35.52756-23,35.52756l35,30,40.05906-72.33071Z" fill="#ffb6b6"/><path d="M347.36927,203.17415s32-8.53543,50,9.46457,39,51,39,51l-1,26-50-24.10236-38-62.3622Z" fill="#ffb6b6"/><path d="M355.52675,199.63871s41.84252-15,68.84252,17,35,133,35,133c0,0,61,187,46,189s-106.53979,7.52756-106.53979,7.52756l-31.46021-203.52756-14-143h2.15748Z" fill="#2f2e41"/><path d="M259.36927,379.63871l-10,36,136,10s-5-30.09449,0-41.04724l-126-4.95276Z" fill="#fcb4b4"/><polygon points="336.36927 613.63871 342.36927 699.63871 417.88895 697.63871 415.36927 610.63871 336.36927 613.63871" fill="#fcb4b4"/><polygon points="218.54477 605.13198 196.36927 698.63871 275.42791 698.10382 295.57041 621.67327 218.54477 605.13198" fill="#fcb4b4"/><path d="M353.36927,199.63871h-61.33858l-49.66142,66,11,135s25-7,60-7h75s-11-35,3-49,4-79,4-79l-42-66Z" fill="#ffcdcd"/><path d="M244.36927,404.63871l-56,203s82.46021,33.13386,132.2301,23.56693,117.7699-12.56693,117.7699-12.56693l-48-206-146-8Z" fill="#2f2e41"/><path id="uuid-dda76ffd-f581-4aef-8961-053e5e9dc1b0-76" d="M373.8654,478.91104c12.08511,10.18033,16.6283,24.66792,10.14821,32.3579-6.48009,7.68998-21.52745,5.66969-33.6155-4.51589-4.88449-4.00249-8.73944-9.11651-11.2423-14.91424l-50.66036-43.78114,21.05193-23.3355,47.70709,45.63794c6.14044,1.48281,11.83636,4.41493,16.61093,8.55093Z" fill="#fcb4b4"/><polygon points="342.95795 443.519 281.02708 363.99382 222.36927 256.63871 220.84826 405.52921 308.77357 477.74514 342.95795 443.519" fill="#2f2e41"/><path d="M296.21179,199.63871s-41.84252-15-68.84252,17c-27,32-35,133-35,133,0,0-61,187-46,189,15,2,106.53979,7.52756,106.53979,7.52756l31.46021-203.52756,14-143h-2.15748Z" fill="#2f2e41"/><rect x="581.36927" y="161.63871" width="2" height="348" fill="#3f3d56"/><path d="M27.36927,518.63871c19.90002,12.82996,38.54004,30.01001,56,51.20001v32.39996c-8.52002-2.89996-41.03998-14.91998-53.88-33.92999-14.83997-21.96997-17.47998-55.32001-5.12-63.66998,3.21997-2.17004,7.13-2.44,11.41998-1.25,13.52997,9.72998,26.47003,21.52997,38.83002,35.27997,4.38,6.73004,7.09009,15.29999,8.75,23.96002v.40997c-15.98999-22.25995-34.79004-36.69995-56-44.39996Z" fill="#ffcdcd"/><path d="M26.36927,319.63871c19.90002,12.82996,38.54004,30.01001,56,51.20001v7.39996c-1.66992-.57001-4.25-1.47998-7.42993-2.72998-14.28003-16.92999-30.56006-28.33002-48.57007-34.87,12.59998,8.12,24.69995,17.98999,36.31006,29.51996-12.28003-5.90997-26.64008-14.66998-34.19006-25.84998-.79999-1.17999-1.56-2.37-2.27997-3.57001-12.70001-21.08002-13.54004-44.20001-1.84003-52.09998,12.35999-8.35004,34.03003,3.47998,48.87,25.44,8.57996,12.70996,10.98999,32.42999,11.47998,46.77997-.78992,1.04004-1.56995,2.10004-2.34998,3.17999-15.98999-22.25995-34.79004-36.69995-56-44.39996Z" fill="#ffcdcd"/><path d="M139.6493,437.84418v.01001c-1.42004,3.92999-3.19995,7.89996-5.32007,11.81-3.1499,5.82001-7.98999,11.21997-13.46997,16.04999-5.87,5.17999-12.48999,9.70001-18.58008,13.37-8.5,5.13-15.96997,8.60999-18.90991,9.92999v-3.14996c16.89001-20.10004,34.84998-36.48004,54-48.82001-20.34009,7.38-38.44995,20.97998-54,41.70996v-13.88995c16.89001-20.10004,34.84998-36.48004,54-48.82001-20.34009,7.38-38.44995,20.97998-54,41.70996v-13.88995c16.66992-19.83002,34.37-36.04004,53.23999-48.32001,8.84009,7.10999,9.60999,24.26001,3.04004,42.29999Z" fill="#ffcdcd"/><rect x="82.36927" y="350.63871" width="2" height="348" fill="#3f3d56"/></svg>
            </div>
        </div>

        <div class="p-4 lg:p-12 rounded-2xl overflow-hidden bg-green-50">
            <div class="flex items-center text-green-500">
                <p class="text-sm font-bold uppercase">
                    Feature 5 & Feature 6
                </p>

                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </div>

            <h2 class="mt-4 text-3xl font-semibold text-slate-800">
                This is an Amazing Feature
            </h2>

            <p class="mt-4 text-lg text-slate-600">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>

            <div class="mt-12 flex justify-center items-center hover:scale-125 transform ease-in-out duration-150 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[400px] h-auto" viewBox="0 0 656 447.5061" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M108.40148,315.94602c-3.16093,.3401-6.60921,.85055-10.27718,1.59744-15.55246,3.16687-15.87526,13.72736-15.73896,16.14847l-.10566-.06586c-1.56382,2.50859-2.54325,5.0473-3.13519,7.44337l-.71221-32.36652c.46052-.9602,.87954-2.04896,1.22889-3.16494,1.16419,3.58504,3.07256,6.97195,4.7176,6.74748,2.13909-.2919,3.07167-6.58596,2.67265-11.05881,2.72016,3.50314,7.2981,7.24972,9.02511,6.09446,1.38001-.92313,.56173-4.72359-.94492-8.17871,3.13929,1.89132,6.61613,3.13439,7.69503,1.93342,1.47227-1.63885-2.05557-7.23082-5.30905-10.35235,4.35496,.40613,9.89372-.28771,10.25684-2.26977,.2992-1.6331-2.99722-3.69384-6.5255-5.02014,3.5439-.93441,6.85789-2.56256,6.74798-4.17324-.13057-1.91338-5.05068-3.19543-9.29526-3.39051,3.20154-2.50471,6.14321-5.96711,5.24362-7.53303-.82704-1.43962-4.67439-.88198-8.22406,.38596,2.10064-3.00326,3.5775-6.38742,2.45277-7.54556-1.40106-1.44266-6.37359,1.04738-9.76711,3.79978,.66062-4.28797,.32665-9.70052-1.59659-10.19022-1.60895-.40967-3.88929,2.73886-5.4527,6.16866-.69097-3.59931-2.08979-7.01645-3.7042-7.01645-2.29982,0-4.16418,6.93399-4.16418,11.45149,0,.25536,.00677,.49574,.01843,.72541-.23083-.26761-.49538-.54719-.79707-.84018-3.24076-3.14728-9.51391-6.64064-11.11616-4.99082-1.12474,1.15814,.35212,4.5423,2.45277,7.54556-3.54967-1.26794-7.39702-1.82559-8.22406-.38596-1.11127,1.93439,3.63883,6.76323,7.4999,9.10499-.2321-.02796-.47595-.0515-.73547-.0692-4.50701-.30752-11.55183,1.08049-11.7084,3.37497-.10991,1.61067,3.20409,3.23883,6.74798,4.17324-3.52829,1.3263-6.8247,3.38704-6.5255,5.02014,.36312,1.98206,5.90188,2.6759,10.25684,2.26977-3.25348,3.12154-6.78132,8.7135-5.30905,10.35235,1.0789,1.20097,4.55573-.0421,7.69503-1.93342-1.50665,3.45512-2.32492,7.25558-.94492,8.17871,1.82373,1.21996,6.82541-3.02601,9.4625-6.67949-.2687,4.46965,.80077,10.61004,2.9228,10.85236,.88742,.10134,1.82777-.84507,2.67643-2.3023l-2.40356,34.79012c-.56184,4.05159,3.03199,6.69542,3.35318,8.36434l.51842,23.5593c-.58508-1.67794-1.37316-3.3952-2.43548-5.09933l-.10566,.0659c.13628-2.42136-.18675-12.98155-15.73896-16.14836-3.66797-.74689-7.11625-1.25734-10.27718-1.59744-3.73116-.40145-5.1866,4.70611-1.81595,6.35581,4.88144,2.38917,9.4733,5.39935,11.86668,8.96403,6.11901,9.11359,14.5737,3.84542,15.77578,3.0275,1.34266,2.23509,2.22306,4.48687,2.77913,6.62945l.27531,12.51144c-.06744,.2959-.11414,.46159-.11777,.47403l.12902,.03782,.66628,30.27884,6.18057-.04965-2.21068-30.94947c.37149-1.66957,1.51435-7.35722,0-13.26406l-2.21068-24.31744h0c-.0055-.01877,.12548,.63842,0,0l-2.8837-9.55504c.41933-2.95604,1.3925-6.28098,3.36894-9.57097,1.20206,.81791,9.65677,6.08611,15.77579-3.0275,2.39338-3.56469,6.98524-6.57486,11.86668-8.96403,3.37065-1.64971,1.91521-6.75726-1.81595-6.35581Zm-28.23342,71.6385l-.11651-5.2952c.23499,2.00214,.2231,3.80933,.11651,5.2952Z" fill="#f2f2f2"/><path d="M581.40148,315.94602c-3.16093,.3401-6.60921,.85055-10.27718,1.59744-15.55246,3.16687-15.87526,13.72736-15.73896,16.14847l-.10566-.06586c-1.56382,2.50859-2.54325,5.0473-3.13519,7.44337l-.71221-32.36652c.46052-.9602,.87954-2.04896,1.22889-3.16494,1.16419,3.58504,3.07256,6.97195,4.7176,6.74748,2.13909-.2919,3.07167-6.58596,2.67265-11.05881,2.72016,3.50314,7.2981,7.24972,9.02511,6.09446,1.38001-.92313,.56173-4.72359-.94492-8.17871,3.13929,1.89132,6.61613,3.13439,7.69503,1.93342,1.47227-1.63885-2.05557-7.23082-5.30905-10.35235,4.35496,.40613,9.89372-.28771,10.25684-2.26977,.2992-1.6331-2.99722-3.69384-6.5255-5.02014,3.5439-.93441,6.85789-2.56256,6.74798-4.17324-.13057-1.91338-5.05068-3.19543-9.29526-3.39051,3.20154-2.50471,6.14321-5.96711,5.24362-7.53303-.82704-1.43962-4.67439-.88198-8.22406,.38596,2.10064-3.00326,3.5775-6.38742,2.45277-7.54556-1.40106-1.44266-6.37359,1.04738-9.76711,3.79978,.66062-4.28797,.32665-9.70052-1.59659-10.19022-1.60895-.40967-3.88929,2.73886-5.4527,6.16866-.69097-3.59931-2.08979-7.01645-3.7042-7.01645-2.29982,0-4.16418,6.93399-4.16418,11.45149,0,.25536,.00677,.49574,.01843,.72541-.23083-.26761-.49538-.54719-.79707-.84018-3.24076-3.14728-9.51391-6.64064-11.11616-4.99082-1.12474,1.15814,.35212,4.5423,2.45277,7.54556-3.54967-1.26794-7.39702-1.82559-8.22406-.38596-1.11127,1.93439,3.63883,6.76323,7.4999,9.10499-.2321-.02796-.47595-.0515-.73547-.0692-4.50701-.30752-11.55183,1.08049-11.7084,3.37497-.10991,1.61067,3.20409,3.23883,6.74798,4.17324-3.52829,1.3263-6.8247,3.38704-6.5255,5.02014,.36312,1.98206,5.90188,2.6759,10.25684,2.26977-3.25348,3.12154-6.78132,8.7135-5.30905,10.35235,1.0789,1.20097,4.55573-.0421,7.69503-1.93342-1.50665,3.45512-2.32492,7.25558-.94492,8.17871,1.82373,1.21996,6.82541-3.02601,9.4625-6.67949-.2687,4.46965,.80077,10.61004,2.9228,10.85236,.88742,.10134,1.82777-.84507,2.67643-2.3023l-2.40356,34.79012c-.56184,4.05159,3.03199,6.69542,3.35318,8.36434l.51842,23.5593c-.58508-1.67794-1.37316-3.3952-2.43548-5.09933l-.10566,.0659c.13628-2.42136-.18675-12.98155-15.73896-16.14836-3.66797-.74689-7.11625-1.25734-10.27718-1.59744-3.73116-.40145-5.1866,4.70611-1.81595,6.35581,4.88144,2.38917,9.4733,5.39935,11.86668,8.96403,6.11901,9.11359,14.5737,3.84542,15.77578,3.0275,1.34266,2.23509,2.22306,4.48687,2.77913,6.62945l.27531,12.51144c-.06744,.2959-.11414,.46159-.11777,.47403l.12902,.03782,.66628,30.27884,6.18057-.04965-2.21068-30.94947c.37149-1.66957,1.51435-7.35722,0-13.26406l-2.21068-24.31744h0c-.0055-.01877,.12548,.63842,0,0l-2.8837-9.55504c.41933-2.95604,1.3925-6.28098,3.36894-9.57097,1.20206,.81791,9.65677,6.08611,15.77579-3.0275,2.39338-3.56469,6.98524-6.57486,11.86668-8.96403,3.37065-1.64971,1.91521-6.75726-1.81595-6.35581Zm-28.23342,71.6385l-.11651-5.2952c.23499,2.00214,.2231,3.80933,.11651,5.2952Z" fill="#f2f2f2"/><path d="M485.44292,216.85712l-2.89819-69.09314s-3.25537-41.01923-5.85986-55.34344c-2.60437-14.32416-20.18408-10.4176-20.18408-10.4176l1.95337,41.01929,8.42773,41.97778,6.55957,57.16211c-.33789,1.6535-.5293,3.45087-.5293,5.33789,0,8.00812,3.34424,14.5,7.46973,14.5s7.46973-6.49188,7.46973-14.5c0-4.21252-.93103-7.99371-2.40869-10.64288Z" fill="#ffb6b6"/><path d="M344.36666,198.95449c3.08175-3.6707,6.77264-6.1651,10.08696-7.12522l38.98077-44.06526s3.2555-41.01927,5.8599-55.34346c2.6044-14.32419,20.18408-10.41759,20.18408-10.41759l-1.9533,41.01927-11.06869,44.27477-45.61337,38.72532c-.79655,1.45114-1.77304,2.90165-2.94266,4.29478-5.54929,6.60955-13.07747,9.42409-16.81477,6.28638-3.73715-3.13771-2.2682-11.03944,3.28109-17.64899Z" fill="#ffb6b6"/><polygon points="430.13131 76.46862 434.65312 59.08516 452.2687 58.23783 457.53901 82.20035 430.13131 76.46862" fill="#ffb6b6"/><polygon points="430.13131 76.46862 434.65312 59.08516 452.2687 58.23783 457.53901 82.20035 430.13131 76.46862" opacity=".1"/><g><polygon points="385.1488 361.25683 368.64994 360.3143 370.81424 410.94912 381.99418 411.58853 385.1488 361.25683" fill="#ffb6b6"/><path d="M369.38449,394.93938l5.72891,2.61332-.00743,3.47275s1.38213-4.01923,8.80109-4.89615l.88559,3.36705s2.87736,3.30264,2.38384,9.27645l-1.8885,15.99763-5.59502-.12882-.90369-11.132s-1.5413-2.52606-8.64068,9.47718c0,0-7.82052,1.9711-19.93118-2.08958-1.66453-.55811-2.82078-2.11212-2.79901-3.86759,.01202-.96878,.39069-1.8641,1.60549-2.18526,3.0922-.8175,6.11176,.21911,8.10866-2.24898,1.9969-2.46809,12.25193-17.656,12.25193-17.656Z" fill="#2f2e41"/></g><g><polygon points="473.69834 361.25683 457.19947 360.3143 459.36377 410.94912 470.54371 411.58853 473.69834 361.25683" fill="#ffb6b6"/><path d="M457.93402,394.93938l5.72891,2.61332-.00743,3.47275s1.38213-4.01923,8.80109-4.89615l.88559,3.36705s2.87736,3.30264,2.38384,9.27645l-1.8885,15.99763-5.59502-.12882-.90369-11.132s-1.5413-2.52606-8.64068,9.47718c0,0-7.82052,1.9711-19.93118-2.08958-1.66453-.55811-2.82078-2.11212-2.79901-3.86759,.01202-.96878,.39069-1.8641,1.60549-2.18526,3.0922-.8175,6.11176,.21911,8.10866-2.24898,1.9969-2.46809,12.25193-17.656,12.25193-17.656Z" fill="#2f2e41"/></g><circle cx="443.67515" cy="49.78935" r="19.53299" fill="#ffb6b6"/><path d="M454.75196,53.03639s-8.58797-14.05193-17.1846-12.50095c-8.59662,1.55098-13.07809,2.95128-13.07809,2.95128,0,0-3.50075-11.20367,8.25239-16.57884,0,0-16.63273-13.92589,1.09406-22.86307,17.72679-8.93718,28.7577-.27561,28.7577-.27561,0,0,14.67194,12.44289-1.59513,23.95832,0,0,14.07934,16.03785-.14106,31.35764,0,0,2.5104-11.66516-.9046-9.27374-3.41501,2.39142-5.20067,3.22497-5.20067,3.22497Z" fill="#2f2e41"/><path d="M456.82639,77.77082l-26.69508-3.2555-20.50963,16.60304s-10.20026,28.4207-2.6044,45.57697c.18201,.4111,.32555,28.97393,.32555,28.97393h56.71743s-.05495-19.44142,2.11224-26.48271c.3096-1.0059,.66455-1.75873,1.07149-2.16567,3.2555-3.2555,11.06869-24.09068,7.16209-33.20607-3.9066-9.11539-17.57969-26.04398-17.57969-26.04398Z" fill="#cdffd5"/><polygon points="407.01728 164.36705 371.20681 278.30947 363.39361 368.1612 385.20545 368.1612 403.76178 284.82046 429.31616 236.57758 454.54754 374.67219 476.56445 374.67219 476.03383 187.80663 464.01412 164.36705 407.01728 164.36705" fill="#2f2e41"/><rect y="422.15664" width="656" height="2" fill="#3f3d56"/><g><path d="M336.26362,187.42757c-6.50229-10.47037-21.67223-12.93381-32.93992-7.93906-11.26769,4.99475-19.0565,15.64429-24.35105,26.77426-5.29455,11.12996-8.62502,23.12151-14.06681,34.18023-16.01157,32.53845-48.43603,53.78965-68.83256,83.77469-15.32504,22.52941-23.44045,49.88437-22.88108,77.12621,.21426,10.43456,1.9016,21.41209,8.41343,29.56819,9.66535,12.1059,26.77774,14.58924,42.18653,16.18335,8.95057,.92597,19.93647,.89956,24.54601-6.82846,1.82337-3.05693-17.77064-13.72146-17.45627-17.26697,1.69638-19.13259,23.34373-31.28271,25.04011-50.41531,2.6597,13.33132-.7489,27.0942-.2109,40.67759,.53799,13.58339,7.23345,28.94778,20.53418,31.75641,4.10444,.86671,8.73862,.26717,11.84946-2.54713,3.11084-2.81429,4.01941-8.13071,1.24812-11.27992,2.83767,2.89821,7.62638,3.6514,11.21672,1.76422,3.59034-1.88718,5.68538-6.25866,4.90727-10.23943-.5722-2.92733-2.46138-5.38952-4.0973-7.88359-8.86167-13.51019-11.17027-31.11518-6.09158-46.45342,8.97777-27.11391,38.45973-44.81167,43.45404-72.93321,3.70897-20.88416-6.8726-44.54836,4.35624-62.54329,5.06032-8.10949,13.65271-13.22163,20.50586-19.88533,6.85315-6.6637,12.21238-16.85889,8.29043-25.57606l-35.02913-.03819" fill="#3f3d56"/><path d="M228.23833,426.7864c-.87183,0-1.76514-.23291-2.62842-.6958-1.98853-1.06641-3.48804-3.1748-3.82056-5.37207-.55322-3.6543,1.1875-7.20312,2.58618-10.05469,3.82593-7.79883,7.60791-16.13818,8.16528-24.80273,.60889-9.46045-3.22852-18.22949-9.77563-22.34082-4.86572-3.05469-11.36255-3.84033-18.29248-2.21045-6.13794,1.44336-11.6521,4.39404-17.71045,7.81689-.4812,.27197-1.09082,.10254-1.36255-.37891-.27173-.48047-.10205-1.09082,.37866-1.3623,5.96631-3.37109,11.85034-6.521,18.23633-8.02295,7.45483-1.75195,14.49146-.87793,19.81396,2.46436,7.16016,4.49609,11.36328,13.98047,10.70824,24.1626-.58104,9.03027-4.45141,17.57617-8.36596,25.55518-1.34229,2.73682-2.86377,5.83887-2.40405,8.87451,.23779,1.57129,1.35815,3.14209,2.78833,3.90869,.69653,.37402,1.75879,.71045,2.86206,.19727,.50146-.23438,1.0957-.0166,1.32886,.48389s.0166,1.0957-.48413,1.32861c-.64282,.2998-1.32617,.44873-2.02368,.44873Z" fill="#2f2e41"/><path d="M304.87324,186.74131c-1.30944,3.58632,.43745,7.60574,2.85869,10.55768,2.42124,2.95194,5.531,5.3258,7.66451,8.49194,4.47207,6.63654,3.80132,15.70946,.36506,22.93685-3.43625,7.22739-9.22913,13.01799-14.91052,18.65402,.41995-2.41674-.80214-4.85632-2.46745-6.65736s-3.7617-3.13792-5.62402-4.73441c-8.67234-7.43441-11.3852-20.98221-6.24412-31.18266" fill="#2f2e41"/><path d="M186.42241,400.10863c-7.34594-.9001-13.55119,5.70986-20.88233,6.72341-8.47755,1.17204-16.27381-5.53591-20.04567-13.21807-3.77186-7.68216-4.73983-16.40208-7.33471-24.55739-2.59488-8.15531-7.60116-16.41523-15.75739-19.00722-3.42187-1.08745-7.29353-1.02838-10.47242,.64087-3.17889,1.66926-5.50871,5.07712-5.4292,8.66675,.09784,4.41706,3.4851,7.95244,5.53718,11.8651,3.26521,6.2257,3.16378,13.59894,4.60607,20.47941,3.46765,16.54261,16.92397,30.57084,33.30801,34.72366,8.47267,2.14754,17.95749,1.6559,25.29692-3.09078s11.81291-14.30671,9.09603-22.61434" fill="#3f3d56"/></g></svg>
            </div>
        </div>

        <div class="p-4 lg:p-12 rounded-2xl overflow-hidden bg-purple-50">
            <div class="flex items-center text-purple-500">
                <p class="text-sm font-bold uppercase">
                    Feature 7 & Feature 8
                </p>

                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </div>

            <h2 class="mt-4 text-3xl font-semibold text-slate-800">
                This is an Amazing Feature
            </h2>

            <p class="mt-4 text-lg text-slate-600">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
            
            <div class="mt-12 flex justify-center items-center hover:scale-125 transform ease-in-out duration-150 transition-transform">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-[400px] h-auto" viewBox="0 0 685.67004 428.52452" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M0,427.10999c0,.66003,.53003,1.19,1.19006,1.19H684.48004c.65997,0,1.19-.52997,1.19-1.19,0-.65997-.53003-1.19-1.19-1.19H1.19006c-.66003,0-1.19006,.53003-1.19006,1.19Z" fill="#3f3d56"/><path d="M283.49664,428H69.91658c-8.5293,0-15.46826-6.93945-15.46826-15.46875V15.46826c0-8.5293,6.93896-15.46826,15.46826-15.46826h213.58006c8.5293,0,15.46826,6.93896,15.46826,15.46826V412.53125c0,8.5293-6.93896,15.46875-15.46826,15.46875ZM69.91658,2c-7.42627,0-13.46826,6.04199-13.46826,13.46826V412.53125c0,7.42676,6.04199,13.46875,13.46826,13.46875h213.58006c7.42627,0,13.46826-6.04199,13.46826-13.46875V15.46826c0-7.42627-6.04199-13.46826-13.46826-13.46826H69.91658Z" fill="#3f3d56"/><g><path d="M666.53394,201.90677c-.8443-1.42365-4.49683,.10068-5.16833-1.19135-.66913-1.28735,2.72449-3.24887,4.66333-7.7298,.34967-.80807,2.55298-5.90033,.92188-7.47162-3.09174-2.97836-17.23962,9.31259-22.19073,5.29041-1.08661-.88269-1.8457-2.64484-5.13428-5.50583-1.30829-1.13815-2.09937-1.65204-2.86499-1.46085-1.08636,.27127-1.17242,1.72522-2.33734,4.58398-1.74701,4.28729-2.78027,4.02841-3.79816,7.44897-.75562,2.53925-.58301,4.01553-1.47217,4.30313-1.25824,.40701-2.41638-2.28632-4.01099-2.04517-1.6272,.24612-2.61096,3.38205-2.92169,5.72998-.58313,4.40607,1.03497,7.31348,1.93182,10.37064,.97461,3.32236,1.55304,8.37494-.69769,15.52759l-22.27716,62.76614c4.91809-12.87943,19.15845-48.18536,25.14215-61.3053,1.72742-3.78745,3.6347-7.62909,7.55096-9.14526,3.77045-1.45978,8.94867-.58823,15.55029-2.17862,.771-.1857,2.91052-.73007,3.17981-1.98849,.22266-1.04037-1.03583-1.62109-.84247-2.59549,.25934-1.30701,2.73413-1.32306,5.77533-2.83096,2.14447-1.06332,3.48047-2.32785,4.62933-3.41531,.34637-.32785,5.49512-5.26166,4.37115-7.1568h-.00006Z" fill="#f2f2f2"/><path d="M578.88879,234.94949c-.94232,.0036-1.24805,2.23611-2.07593,2.1929-.82489-.04303-.80847-2.2746-2.4483-4.5191-.29572-.40475-2.1593-2.95547-3.40112-2.60825-2.35382,.65808-.4035,11.14828-3.80615,12.41782-.7467,.27863-1.83069,.14276-4.18372,.93134-.9361,.31372-1.41656,.55371-1.54364,.98465-.1803,.61145,.50842,1.07324,1.57544,2.46979,1.60016,2.09445,1.17499,2.52692,2.56012,4.01343,1.02826,1.10352,1.80261,1.44476,1.68726,1.96414-.16327,.73499-1.81934,.52631-2.16107,1.37851-.34869,.86966,.90662,2.25729,1.9693,3.08725,1.99426,1.5575,3.88812,1.6022,5.6474,2.04413,1.9118,.48026,4.55859,1.65421,7.41974,4.82266l24.37836,29.04382c-4.90228-6.12997-18.12189-23.30609-22.83472-30.0285-1.36047-1.94061-2.69568-3.98517-2.30981-6.34479,.37146-2.27176,2.29327-4.56177,3.41748-8.26077,.13135-.43201,.48145-1.63916-.05847-2.13443-.44635-.40945-1.09448,.04068-1.51697-.33539-.56665-.50443,.13953-1.72369,.27692-3.6514,.09686-1.35931-.13831-2.37988-.34058-3.25754-.06097-.26459-.99695-4.21518-2.25134-4.21036v.00009h-.00018Z" fill="#f2f2f2"/><path d="M597.68842,239.16959l-.56775-5.06818,.2594-.38422c1.20038-1.77667,1.81213-3.51175,1.81952-5.15872,.00122-.26184-.01105-.52371-.02325-.79044-.04895-1.05719-.11011-2.37134,.57507-3.90329,.38422-.85406,1.46344-2.83142,3.08594-2.5867,.43683,.06119,.76721,.26184,1.01807,.49677,.03668-.05872,.07465-.11746,.11499-.18109,.50531-.77087,.90546-1.10123,1.29089-1.41937,.29608-.24472,.60199-.49677,1.08167-1.0939,.21045-.26184,.37439-.49188,.5127-.68521,.41974-.58487,.96783-1.28235,1.93451-1.27011,1.03271,.04895,1.57355,.90302,1.93207,1.46832,.63995,1.00824,.92993,1.73508,1.12207,2.21716,.06976,.17621,.14929,.37442,.1897,.43561,.33282,.48944,3.03827,.0318,4.05743-.13461,2.28937-.38177,4.27039-.71213,5.08655,.73172,.5849,1.03271,.15051,2.39825-1.33008,4.1676-.4613,.55063-.95197,.96909-1.38757,1.29703,.36096,.21536,.68396,.54572,.81494,1.06454h0c.30835,1.22849-.74762,2.45944-3.13733,3.66348-.59344,.30099-1.39246,.70236-2.51202,.89569-.52734,.09055-1.00214,.11258-1.40839,.12482-.00861,.23492-.06366,.48944-.20679,.75128-.41974,.77087-1.29333,1.13794-2.60992,1.04984-1.44873-.07587-2.64172-.35239-3.69403-.59467-.91888-.21045-1.71057-.3891-2.33215-.3475-1.15265,.09299-2.04102,1.01559-3.0835,2.21228l-2.6026,3.04187h-.00012Z" fill="#f2f2f2"/><path d="M600.32214,208.99365l-4.75842,1.83472-.43744-.15347c-2.02301-.71045-3.85657-.86215-5.45154-.45148-.2536,.06525-.50378,.14349-.75873,.22299-1.01019,.31549-2.26587,.70801-3.92151,.43378-.92358-.155-3.11005-.69739-3.28485-2.32889-.05164-.43805,.05872-.80853,.22229-1.11075-.0661-.0206-.13257-.04239-.20435-.06531-.87384-.2933-1.29486-.59653-1.70044-.88867-.31183-.22437-.63324-.45633-1.33252-.76883-.30664-.13715-.57074-.2374-.79285-.32211-.67218-.2576-1.4859-.61096-1.71924-1.5491-.2146-1.01135,.47437-1.75113,.93024-2.24133,.81299-.87476,1.44244-1.33963,1.86005-1.64774,.15271-.11215,.32428-.23938,.37323-.29395,.38904-.44608-.73987-2.94693-1.15936-3.89062-.94995-2.11765-1.77203-3.95007-.5824-5.10577,.85059-.8277,2.28168-.75391,4.36865,.22946,.64966,.30655,1.17883,.67502,1.60657,1.01321,.11676-.40378,.35437-.80005,.82306-1.05829h0c1.11011-.60986,2.5686,.09933,4.33948,2.10547,.44165,.49768,1.03259,1.16876,1.50354,2.2027,.22131,.48715,.3631,.9408,.47797,1.33066,.22943-.0513,.48956-.06259,.77917,.00946,.85211,.21045,1.42877,.9624,1.67749,2.2583,.29413,1.42062,.32922,2.64474,.36182,3.72409,.02948,.94226,.0575,1.75336,.25543,2.34406,.38232,1.09134,1.50006,1.71661,2.92206,2.42148l3.60254,1.74591-.00012,.00003h.00018Z" fill="#f2f2f2"/><path d="M597.68842,194.06265l-.56775-5.06818,.2594-.38422c1.20038-1.77667,1.81213-3.51175,1.81952-5.15872,.00122-.26184-.01105-.52371-.02325-.79044-.04895-1.05719-.11011-2.37134,.57507-3.90329,.38422-.85406,1.46344-2.83142,3.08594-2.5867,.43683,.06119,.76721,.26184,1.01807,.49677,.03668-.05872,.07465-.11746,.11499-.18109,.50531-.77087,.90546-1.10123,1.29089-1.41937,.29608-.24472,.60199-.49677,1.08167-1.0939,.21045-.26184,.37439-.49188,.5127-.68521,.41974-.58487,.96783-1.28235,1.93451-1.27011,1.03271,.04895,1.57355,.90302,1.93207,1.46832,.63995,1.00824,.92993,1.73508,1.12207,2.21716,.06976,.17621,.14929,.37442,.1897,.43561,.33282,.48944,3.03827,.0318,4.05743-.13461,2.28937-.38177,4.27039-.71213,5.08655,.73172,.5849,1.03271,.15051,2.39825-1.33008,4.1676-.4613,.55063-.95197,.96909-1.38757,1.29703,.36096,.21536,.68396,.54572,.81494,1.06454h0c.30835,1.22849-.74762,2.45944-3.13733,3.66348-.59344,.30099-1.39246,.70236-2.51202,.89569-.52734,.09055-1.00214,.11258-1.40839,.12482-.00861,.23492-.06366,.48944-.20679,.75128-.41974,.77087-1.29333,1.13794-2.60992,1.04984-1.44873-.07587-2.64172-.35239-3.69403-.59467-.91888-.21045-1.71057-.3891-2.33215-.3475-1.15265,.09299-2.04102,1.01559-3.0835,2.21228l-2.6026,3.04187h-.00012Z" fill="#f2f2f2"/><path d="M602.87408,292.4404l-1.06207-.66565-.25696-1.22604,.25696,1.22604-1.23828,.14194c-.01959-.11502-.08685-.37933-.18842-.79291-.55426-2.26611-2.24408-9.16235-3.65369-20.02304-.98383-7.58145-1.54053-15.37579-1.65558-23.17017-.11499-7.80658,.25452-13.71661,.55066-18.46661,.22394-3.5827,.49554-6.99411,.76233-10.31744,.70972-8.87848,1.37903-17.26505,.88098-26.54974-.11011-2.07278-.34137-6.38721-2.862-10.97818-1.46222-2.66257-3.47626-5.02655-5.98706-7.02347l1.56134-1.96265c2.77142,2.20737,4.99963,4.8259,6.62335,7.78214,2.79474,5.09018,3.04675,9.79129,3.16791,12.05005,.50653,9.44867-.17004,17.91602-.88715,26.88013-.26428,3.31107-.53595,6.70779-.75867,10.27582-.29364,4.70599-.65955,10.56458-.54572,18.27084,.11261,7.70135,.66321,15.40027,1.63348,22.88629,1.39246,10.72366,3.0578,17.51712,3.60474,19.74896,.29126,1.1918,.35242,1.44141,.05383,1.91373v-.00003Z" fill="#f2f2f2"/><path d="M583.82501,178.57675c-.10278,0-.20679-.00244-.31201-.0098-2.13397-.11502-4.11011-1.39246-5.87451-3.79562-.82715-1.13062-1.25055-2.42029-2.09485-4.99231-.13092-.39645-.76721-2.40805-1.15387-5.17584-.2533-1.8085-.2215-2.56467,.13702-3.23276,.39764-.74396,1.04126-1.26276,1.76569-1.6127-.0318-.23984-.0061-.487,.0979-.73907,.427-1.04495,1.5625-.9079,2.17682-.84183,.31079,.03915,.69867,.09055,1.11719,.06851,.65826-.0318,1.0119-.2276,1.54785-.52127,.5127-.28143,1.15021-.63138,2.09607-.82471,1.86481-.3891,3.42731,.1395,3.94244,.31323,2.71027,.90302,4.04645,3.01007,5.59308,5.44992,.30835,.48944,1.36676,2.271,2.06543,4.71332,.50415,1.76199,.43317,2.5451,.28143,3.12753-.30835,1.19669-1.03638,1.8819-2.88525,3.39429-1.93085,1.58334-2.8999,2.37625-3.73199,2.85834-1.93695,1.11838-3.15326,1.82071-4.76837,1.82071v.00006h-.00006Z" fill="#f2f2f2"/></g><rect x="53.85261" y="176.50562" width="245.70787" height="63.82022" fill="#babaf5"/><rect x="146.39194" y="1" width="63.82022" height="426" fill="#babaf5"/><path d="M212.57114,235.52103c.45195-1.75784,.72131-3.58492,.78685-5.4678l79.82048-72.69366-68.60675-33.50562-30.23698,80.63196c-2.06674-.53998-4.22375-.85667-6.45964-.85667-1.18709,0-2.34602,.10925-3.49007,.26605l-30.01555-80.04133-68.60674,33.50562,76.68331,69.83658c-.04947,.64944-.09904,1.29909-.09904,1.96117,0,2.20132,.30812,4.3259,.83203,6.36371-47.0048,14.69016-66.24776,59.05203-66.24776,59.05203l59.03371,47.86517c-3.52084-35.20874,17.98061-71.25464,29.6046-87.86917,.76054,.06818,1.52715,.11636,2.30553,.11636s1.54488-.0482,2.30553-.11636c11.62399,16.61453,33.12544,52.66046,29.6046,87.86917l59.03371-47.86517s-19.24295-44.36185-66.24776-59.05202l-.00005-.00002Z" isolation="isolate" opacity=".2"/><path d="M221.23885,325.19043c-.68848,0-1.38232-.14941-2.0376-.45605-1.65723-.77344-2.7041-2.38574-2.73291-4.20801-.48389-30.86719-18.08447-61.16211-28.5332-76.47266-.69775-1.02246-1.90283-1.63281-3.22412-1.63281h-.00586c-1.36963,0-2.57471,.61035-3.27246,1.63281-10.44824,15.31055-28.04883,45.60547-28.5332,76.47266-.02881,1.82129-1.07568,3.43457-2.73291,4.20801-1.67383,.78418-3.60449,.54688-5.0376-.61426l-49.06738-39.78516c-1.75146-1.4209-2.26562-3.90918-1.22217-5.91797,4.95996-9.55176,24.05518-41.74512,61.53027-54.9834,1.67236-.59082,2.68799-2.25586,2.46924-4.0498-.12158-1.00195-.18311-2.00781-.18311-2.99023,.00244-1.17188-.44531-2.23633-1.22852-2.94922l-70.54199-64.24414c-1.16992-1.06543-1.73438-2.63672-1.51074-4.20312,.22412-1.56641,1.20703-2.91699,2.62891-3.61133l58.73291-28.68262c1.20459-.58887,2.61035-.64111,3.85791-.146,1.24658,.49609,2.23145,1.50146,2.70264,2.75732l27.23242,72.62012c.56201,1.49902,2.00342,2.47754,3.63965,2.43652,1.23389-.02832,2.48535,.04297,3.73291,.20508,1.76074,.23535,3.42236-.75781,4.03857-2.4043l27.32178-72.85742c.47119-1.25586,1.45605-2.26123,2.70264-2.75732,1.24658-.49463,2.65381-.44238,3.85791,.146l58.73192,28.68262c1.42236,.69434,2.40576,2.04492,2.62939,3.6123,.22412,1.56543-.34082,3.13672-1.51074,4.20215l-73.90527,67.30762c-.68896,.62695-1.11768,1.4834-1.20752,2.41016-.01953,.2002-.04053,.40039-.06445,.59961h0c-.20264,1.68555,.84473,3.33105,2.49023,3.91211,37.4834,13.23535,56.58154,45.43457,61.54248,54.9873,1.04346,2.00879,.5293,4.49707-1.22217,5.91797l-49.06787,39.78516c-.87207,.70703-1.9292,1.07031-3,1.07031h.00002Z" fill="#babaf5"/><path d="M635.65582,428.3916h-206.06299c-8.5293,0-15.46875-6.93945-15.46875-15.46875v-104.8457c0-8.5293,6.93945-15.46875,15.46875-15.46875h206.06299c8.5293,0,15.46826,6.93945,15.46826,15.46875v104.8457c0,8.5293-6.93896,15.46875-15.46826,15.46875Zm-206.06299-133.7832c-7.42676,0-13.46875,6.04199-13.46875,13.46875v104.8457c0,7.42676,6.04199,13.46875,13.46875,13.46875h206.06299c7.42627,0,13.46826-6.04199,13.46826-13.46875v-104.8457c0-7.42676-6.04199-13.46875-13.46826-13.46875h-206.06299Z" fill="#3f3d56"/><rect x="518.10162" y="292.72849" width="35.20599" height="135.54306" fill="#babaf5"/><rect x="415.12411" y="343.77719" width="235.00003" height="35.20599" fill="#babaf5"/><path d="M525.7522,383.28445c.96973,.2493,1.9776,.39789,3.0163,.43405l40.10095,44.03241,18.48315-37.84644-44.48004-16.68002c.29785-1.14011,.4726-2.32999,.4726-3.56342,0-.65485-.06024-1.29416-.14679-1.92526l44.15424-16.55786-18.48315-37.84644-38.52484,42.30182c-.35828-.02728-.71661-.05463-1.08185-.05463-1.21436,0-2.38635,.16998-3.5105,.45898-8.10376-25.92987-32.57565-36.54514-32.57565-36.54514l-26.40448,32.56555c19.42267-1.94226,39.30713,9.91888,48.47244,16.33118-.0376,.41956-.06421,.84244-.06421,1.27182s.02661,.85223,.06421,1.27182c-9.16528,6.41229-29.04977,18.27341-48.47244,16.33118l26.40448,32.56555s24.47189-10.61526,32.57565-36.54514l-.00006-.00003Z" isolation="isolate" opacity=".2"/><path d="M570.31549,421.69629c-.79736,0-1.56396-.33398-2.10938-.93262l-37.13184-40.77246c-.30615-.33594-.75195-.54883-1.25537-.59961l-.16016-.0166c-.90723-.10059-1.73438,.38965-2.01855,1.19531-7.3291,20.7793-25.17236,31.35449-30.46631,34.10059-1.19287,.62109-2.67432,.30859-3.52344-.74121l-21.94922-27.07129c-.6958-.85742-.83643-2.01367-.36768-3.01758,.4624-.98926,1.42383-1.61328,2.50977-1.62988,16.96875-.26172,33.6416-9.94727,42.06982-15.69727,.50684-.34668,.80957-.94434,.80859-1.59863,.00098-.68359-.30127-1.28125-.80859-1.62695-8.42676-5.75-25.09766-15.43555-42.07031-15.69727-1.08594-.0166-2.04736-.6416-2.50928-1.63086-.46875-1.00391-.32812-2.16016,.36768-3.01758l21.94971-27.07129c.8501-1.04688,2.33154-1.35938,3.52246-.74219,5.29346,2.74707,23.13281,13.32129,30.46338,34.09375,.28418,.80469,1.0957,1.30664,1.9126,1.20801,.88916-.1123,1.7749-.1377,2.63086-.07422l36.02588-39.55859c.6377-.7002,1.57861-1.03906,2.51514-.90332,.9375,.13477,1.74512,.72266,2.16016,1.57324l15.82471,32.40234c.35254,.72168,.38379,1.56348,.08691,2.30957-.29688,.74512-.89844,1.33398-1.6499,1.61523l-40.06201,15.02344c-.73682,.27637-1.21826,.99707-1.19824,1.79199l.00342,.29004c0,.62305-.04346,1.25684-.12891,1.88379-.10986,.80664,.39307,1.60938,1.1958,1.91113l40.19043,15.07129c.75146,.28223,1.35303,.87109,1.6499,1.61719,.29639,.74609,.26465,1.58691-.0874,2.30859l-15.82471,32.40234c-.41504,.85059-1.22266,1.43848-2.16016,1.57227-.13525,.01953-.271,.0293-.40576,.0293Z" fill="#babaf5"/><g><path d="M383.68994,171.68843h-32.2265v-10.61121c0-17.78629,14.44019-32.22649,32.22647-32.22649h.00003v42.83768h0v.00002Z" fill="#2f2e41"/><polygon points="376.54688 151.87964 382.0878 176.80176 349.61862 171.41035 362.84988 147.84016 376.54688 151.87964" fill="#ffb6b6"/><polygon points="376.54688 151.87964 382.0878 176.80176 349.61862 171.41035 362.84988 147.84016 376.54688 151.87964" isolation="isolate" opacity=".1"/><rect x="345.41736" y="205.11847" width="31.12952" height="46.07167" fill="#ffb6b6"/><path d="M396.78104,288.85684l-6.84848,36.73282s4.35812,25.52618-8.71625,51.67499l-8.71625,26.77139-13.0744-1.86777s8.09366-19.92288,8.09366-28.63916,1.86777-42.33612,1.86777-42.33612l-.9339-38.36282,28.32785-3.9733v-.00003Z" fill="#ffb6b6"/><path d="M357.55786,401.54565s14.94217-5.6033,16.18735,2.49036l-.62259,3.73553s5.6033,16.80994-2.49036,18.05511-15.56476,3.11295-16.18735-.62259-.61279-8.39853,.93878-11.67035,2.17416-11.98807,2.17416-11.98807Z" fill="#2f2e41"/><path d="M349.65063,283.15878l-3.63742,37.18832s-11.28528,23.30713-5.9989,52.06046l.92703,28.13931,13.07803,1.84204s-2.23364-21.38785,.19046-29.76025c2.42407-8.37241,9.97998-41.18539,9.97998-41.18539l11.5661-36.58966-26.10529-11.69479v-.00003Z" fill="#ffb6b6"/><path d="M355.9866,402.3103s-12.79434-9.53781-16.24133-2.10974l-.44086,3.76132s-9.87988,18.59116-2.45181,22.03812,13.90759,3.31613,15.54449-.09888,2.92432-7.89679,2.34387-11.47104,1.24561-12.11981,1.24561-12.11981l.00003,.00003Z" fill="#2f2e41"/><path d="M388.68738,229.71077l26.77139,56.65569s-53.85403,27.08267-85.60614,27.08267l15.76575-83.73837h43.06903l-.00003,.00002Z" fill="#2f2e41"/><path d="M364.71765,163.40492l15.56476,2.49036-1.24518,39.22318,17.43253,34.86505-22.41324,11.20662s-17.43253-32.99728-20.54547-53.54276-1.24518-35.48764-1.24518-35.48764l12.45181,1.24518-.00003,.00002Z" fill="#e6e6e6"/><path d="M352.88846,164.6501l-15.56476,2.49036,1.24518,39.22318-3.73553,36.11023,8.71625,9.96144s17.43253-32.99728,20.54547-53.54276,1.24518-35.48764,1.24518-35.48764l-12.45181,1.24518,.00003,.00002Z" fill="#e6e6e6"/><path d="M376.85818,166.82916l3.42426-.93388s12.1405-1.55647,14.00827,3.42426c1.86777,4.98071,1.24518,34.24246,1.24518,34.24246,0,0,3.21255,35.91414-9.28903,36.32347s-10.01126-29.47499-10.01126-29.47499l.62259-43.58131Z" fill="#e6e6e6"/><circle cx="371.11374" cy="142.60597" r="16.11325" fill="#ffb6b6"/><path d="M366.07315,164.78209c3.45673-.877,7.3757,2.81493,8.75443,8.24841,.58051,2.16293,.63461,4.4334,.15778,6.62146l1.48532,6.17636,.10928-.00575,11.71606,27.61118c2.72412,6.41994,2.43628,13.79018-1.03827,19.83698-2.06693,3.59711-4.78021,6.01532-7.96603,3.54678-5.28632-4.0961-8.7392-27.54909-10.31573-41.02138l-3.64523-13.69443c-1.4632-1.69633-2.49875-3.71846-3.01999-5.89713-1.37897-5.43138,.30573-10.54544,3.76242-11.42249h-.00003Z" fill="#ffb6b6"/><path d="M351.02069,166.82916l-3.42426-.93388s-12.1405-1.55647-14.00827,3.42426-1.24518,34.24246-1.24518,34.24246c0,0-3.21255,35.91414,9.28903,36.32347,12.50162,.40935,10.01126-29.47499,10.01126-29.47499l-.62259-43.58131Z" fill="#e6e6e6"/><path d="M361.80569,164.78209c-3.45673-.877-7.3757,2.81493-8.75443,8.24841-.58051,2.16293-.63461,4.4334-.15778,6.62146l-1.48532,6.17636-.10928-.00575-11.71606,27.61118c-2.72412,6.41994-2.43628,13.79018,1.03827,19.83698,2.06693,3.59711,4.78021,6.01532,7.96603,3.54678,5.28632-4.0961,8.7392-27.54909,10.31573-41.02138l3.64523-13.69443c1.4632-1.69633,2.49875-3.71846,3.01999-5.89713,1.37897-5.43138-.30573-10.54544-3.76242-11.42249h.00003Z" fill="#ffb6b6"/><path d="M340.26523,155.64177c.81961-2.49213,2.43759-4.67393,3.1615-7.19553,.96118-3.34805,3.0076,4.07948,3.20724,.60191,.37949-6.60983,10.46753-23.61252,16.22668-26.87849,5.75912-3.266,9.06686-2.28128,14.93423,.78601,0,0,2.84811,.18113,6.39389,1.93169s6.73743,4.55415,8.11655,8.26021c1.09314,2.93758,.97214,6.16356,1.3374,9.27654,1.01755,8.67264,5.87906,16.92076,4.8356,25.5903-.32553,2.70483-1.35361,5.50188-3.56519,7.09282-2.21158,1.59093-5.78452,1.41786-7.24026-.88496-.49677-.78583-.70682-1.71812-1.13254-2.54462-.42572-.82648-1.19495-1.59695-2.12427-1.57123-1.39685,.03867-2.10785,1.91298-1.55704,3.19724s1.84521,2.05965,3.06055,2.74934c-2.8945,1.30214-6.48508,.89667-9.01627-1.01823-2.53116-1.9149-3.89801-5.25984-3.43222-8.39935,.65637-4.42419,7.10159-3.50848,7.86084-7.91618,.5527-3.20865,2.49374-8.57751,1.96503-11.79019-.52869-3.21269-3.0679,.67728-.39301-1.17902-2.94284,1.41867-9.23755-8.28658-12.31836-9.37363-3.08078-1.08705-5.69293-3.44087-7.09381-6.39223-3.26764,4.7368-6.142,3.45045-7.31226,9.08475-1.17026,5.63428-.08823,18.43474,4.73044,21.58038-1.92844,1.31575-3.46573,3.19733-4.37054,5.34937-.5126,1.21915-.84491,2.55313-1.69574,3.56567-1.62491,1.93387-4.62527,2.0515-7.01675,1.23839-2.96533-1.00822-5.50067-3.22269-6.89859-6.02547s-1.6416-6.16022-.66309-9.1355l-.00003,.00002Z" fill="#2f2e41"/></g></svg>
            </div>
        </div>
    </div>
  </div>

Tailwind CSS Basic Features Component

[email protected] 810 views

How to install and add to your project?

Step 1: Include Scripts and Styling CDN inside the head tag

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Step 2: Copy the Tailwind CSS Basic Features Component component code above as you need it

Step 3: Preview the component in your browser 🚀

Step 4: For production release make sure to use the official Tailwind CSS Installation

You are done 🎉

Credits or Attribution

If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.

<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>

Share this component

Sponsors 👑

+ Add Yours
)