Bento Box in Tailwind CSS by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <section> <div class="py-16"> <div class="mx-auto px-6 max-w-6xl text-gray-500"> <div class="relative"> <div class="relative z-10 grid gap-3 grid-cols-6"> <div class="col-span-full lg:col-span-2 overflow-hidden flex relative p-8 rounded-xl bg-white border border-gray-200 dark:border-gray-800 dark:bg-gray-900"> <div class="size-fit m-auto relative"> <div class="relative h-24 w-56 flex items-center"> <svg width="200px" height="100px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 301.2m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#E73B37" /><path d="M400.3 744.5c2.1-0.7 4.1-1.4 6.2-2-2 0.6-4.1 1.3-6.2 2z m0 0c2.1-0.7 4.1-1.4 6.2-2-2 0.6-4.1 1.3-6.2 2z" fill="#39393A" /><path d="M511.8 256.6c24.4 0 44.2 19.8 44.2 44.2S536.2 345 511.8 345s-44.2-19.8-44.2-44.2 19.9-44.2 44.2-44.2m0-20c-35.5 0-64.2 28.7-64.2 64.2s28.7 64.2 64.2 64.2 64.2-28.7 64.2-64.2-28.7-64.2-64.2-64.2z" fill="#E73B37" /><path d="M730.7 529.5c0.4-8.7 0.6-17.4 0.6-26.2 0-179.6-86.1-339.1-219.3-439.5-133.1 100.4-219.2 259.9-219.2 439.5 0 8.8 0.2 17.5 0.6 26.1-56 56-90.6 133.3-90.6 218.7 0 61.7 18 119.1 49.1 167.3 30.3-49.8 74.7-90.1 127.7-115.3 39-18.6 82.7-29 128.8-29 48.3 0 93.9 11.4 134.3 31.7 52.5 26.3 96.3 67.7 125.6 118.4 33.4-49.4 52.9-108.9 52.9-173.1 0-85.4-34.6-162.6-90.5-218.6zM351.1 383.4c9.2-37.9 22.9-74.7 40.6-109.5a502.1 502.1 0 0 1 63.6-95.9c17.4-20.6 36.4-39.9 56.8-57.5 20.4 17.6 39.4 36.9 56.8 57.5 24.8 29.5 46.2 61.8 63.6 95.9 17.7 34.8 31.4 71.6 40.6 109.5 8.7 35.8 13.5 72.7 14.2 109.9C637.4 459 577 438.9 512 438.9c-65 0-125.3 20.1-175.1 54.4 0.7-37.2 5.5-74.1 14.2-109.9z m-90.6 449.2c-9.1-27-13.7-55.5-13.7-84.4 0-35.8 7-70.6 20.8-103.2 8.4-19.8 19-38.4 31.9-55.5 9.7 61.5 29.5 119.7 57.8 172.6-36.4 17.8-69 41.6-96.8 70.5z m364.2-85.3c-0.7-0.3-1.5-0.5-2.2-0.8-0.4-0.2-0.9-0.3-1.3-0.5-0.6-0.2-1.3-0.5-1.9-0.7-0.8-0.3-1.5-0.5-2.3-0.8-0.8-0.3-1.5-0.5-2.3-0.7l-0.9-0.3c-1-0.3-2.1-0.7-3.1-1-1.2-0.4-2.4-0.7-3.5-1.1l-3-0.9c-0.2-0.1-0.4-0.1-0.7-0.2-1.1-0.3-2.3-0.7-3.4-1-1.2-0.3-2.4-0.6-3.5-0.9l-3.6-0.9-3.6-0.9c-1-0.3-2.1-0.5-3.1-0.7-1.2-0.3-2.4-0.5-3.6-0.8-1.3-0.3-2.5-0.6-3.8-0.8h-0.3c-0.9-0.2-1.9-0.4-2.8-0.6-0.4-0.1-0.7-0.1-1.1-0.2-1.1-0.2-2.2-0.4-3.4-0.6-1.2-0.2-2.4-0.4-3.6-0.7l-5.4-0.9c-0.9-0.1-1.9-0.3-2.8-0.4-0.8-0.1-1.6-0.3-2.5-0.4-2.6-0.4-5.1-0.7-7.7-1-1.2-0.1-2.3-0.3-3.5-0.4h-0.4c-0.9-0.1-1.8-0.2-2.8-0.3-1.1-0.1-2.1-0.2-3.2-0.3-1.7-0.2-3.4-0.3-5.1-0.4-0.8-0.1-1.5-0.1-2.3-0.2-0.9-0.1-1.9-0.1-2.8-0.2-0.4 0-0.8 0-1.2-0.1-1.1-0.1-2.1-0.1-3.2-0.2-0.5 0-1-0.1-1.5-0.1-1.3-0.1-2.6-0.1-3.9-0.1-0.8 0-1.5-0.1-2.3-0.1-1.2 0-2.4 0-3.5-0.1h-13.9c-2.3 0-4.6 0.1-6.9 0.2-0.9 0-1.9 0.1-2.8 0.1-0.8 0-1.5 0.1-2.3 0.1-1.4 0.1-2.8 0.2-4.1 0.3-1.4 0.1-2.7 0.2-4.1 0.3-1.4 0.1-2.7 0.2-4.1 0.4-0.6 0-1.2 0.1-1.8 0.2l-7.8 0.9c-1.1 0.1-2.1 0.3-3.2 0.4-1 0.1-2.1 0.3-3.1 0.4-3.2 0.5-6.4 0.9-9.5 1.5-0.7 0.1-1.4 0.2-2.1 0.4-0.9 0.1-1.7 0.3-2.6 0.5-1.1 0.2-2.3 0.4-3.4 0.6-0.9 0.2-1.7 0.3-2.6 0.5-0.4 0.1-0.8 0.1-1.1 0.2-0.7 0.1-1.4 0.3-2.1 0.4-1.2 0.3-2.4 0.5-3.6 0.8-1.2 0.3-2.4 0.5-3.6 0.8-0.2 0-0.4 0.1-0.6 0.1-0.5 0.1-1 0.2-1.5 0.4-1.1 0.3-2.3 0.6-3.5 0.9-1.3 0.3-2.5 0.6-3.8 1-0.4 0.1-0.9 0.2-1.4 0.4-1.3 0.4-2.7 0.7-4 1.1-1.5 0.4-3 0.9-4.6 1.3-1 0.3-2.1 0.6-3.1 1-2.1 0.6-4.1 1.3-6.2 2-0.7 0.2-1.4 0.5-2.1 0.7-15-27.5-27.4-56.4-37-86.2-11.7-36.1-19.2-73.6-22.5-111.6-0.6-6.7-1-13.3-1.3-20-0.1-1.2-0.1-2.4-0.1-3.6-0.1-1.2-0.1-2.4-0.1-3.6 0-1.2-0.1-2.4-0.1-3.6 0-1.2-0.1-2.4-0.1-3.7 18.8-14 39.2-25.8 61-35 36.1-15.3 74.5-23 114.1-23 39.6 0 78 7.8 114.1 23 21.8 9.2 42.2 20.9 61 35v0.1c0 1 0 1.9-0.1 2.9 0 1.4-0.1 2.8-0.1 4.3 0 0.7 0 1.3-0.1 2-0.1 1.8-0.1 3.5-0.2 5.3-0.3 6.7-0.8 13.3-1.3 20-3.3 38.5-11 76.5-23 113-9.7 30.3-22.3 59.4-37.6 87.1z m136.8 90.9a342.27 342.27 0 0 0-96.3-73.2c29.1-53.7 49.5-112.8 59.4-175.5 12.8 17.1 23.4 35.6 31.8 55.5 13.8 32.7 20.8 67.4 20.8 103.2 0 31-5.3 61.3-15.7 90z" fill="#39393A" /><path d="M512 819.3c8.7 0 24.7 22.9 24.7 60.4s-16 60.4-24.7 60.4-24.7-22.9-24.7-60.4 16-60.4 24.7-60.4m0-20c-24.7 0-44.7 36-44.7 80.4 0 44.4 20 80.4 44.7 80.4s44.7-36 44.7-80.4c0-44.4-20-80.4-44.7-80.4z" fill="#E73B37" /></svg> </div> <h2 class="mt-6 text-center font-semibold text-gray-950 dark:text-white text-3xl">Customizable</h2> </div> </div> <div class="col-span-full sm:col-span-3 lg:col-span-2 overflow-hidden relative p-8 rounded-xl bg-white border border-gray-200 dark:border-gray-800 dark:bg-gray-900"> <div> <div class="relative aspect-square rounded-full size-32 flex border mx-auto dark:bg-white/5 dark:border-white/10 before:absolute before:-inset-2 before:border dark:before:border-white/5 dark:before:bg-white/5 before:rounded-full"> <svg width="200px" height="130px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M579.3 245c-27.6-18.8-47.5-38.7-60.1-53.2-12.6 14.5-32.6 34.3-60.3 53.2-51.7 35.2-110.9 54.6-176.4 57.9v232.9c0 8.5 1.1 18.4 3.4 29.4 0 0 28.5 179.4 233.3 272.1 0 0 148.7-56.3 214-214 15.2-34.7 22.4-65.8 22.4-87.5V302.9c-65.5-3.3-124.7-22.7-176.3-57.9z" fill="#FFFFFF" /><path d="M618.8 500.7l44.5-95.4H600l-44.5 95.4zM422.2 405.3l-44.5 95.4H441l44.5-95.4zM574.4 405.3h-63.3l-44.5 95.4h63.3zM299.3 405.3v95.4h52.8l44.5-95.4zM738.9 500.7v-95.4h-50l-44.5 95.4z" fill="#E6E6E6" /><path d="M519.1 837.3c-80.4-34.8-138.6-91.1-177.2-147.5-20.9-7-41-14.5-60.2-22.2 8.1 15.2 17.2 30.4 27.3 45 35.7 51.9 99.7 122.6 201.8 164.5 2.7 1.1 5.5 1.7 8.3 1.7 2.8 0 5.6-0.5 8.3-1.6 74.3-30.6 128.4-76.3 166.1-119-16.7-0.8-33.9-2.1-51.4-3.8-33.1 32.4-73.9 61.7-123 82.9zM891.3 553.2c-7.4-6.6-15.9-13.3-25.5-19.9-19.5-13.7-43.2-27.4-70.3-40.6V285.5c0-12.2-9.8-22.1-21.8-22.1-64.5-0.3-122.3-17.6-171.9-51.4-38.5-26.2-59.2-53.9-64.7-61.8-4.1-5.9-10.8-9.5-18-9.5-7.1 0-13.9 3.5-18 9.4-5.5 7.9-26.3 35.6-64.8 61.8-49.7 33.8-107.6 51.1-172 51.4-12 0.1-21.8 10-21.8 22.1V378c-12.4 0.8-24.1 1.9-35.1 3.4-24.7 3.3-45.7 8.3-62.8 14.9-29 11.3-45.9 27.1-50.3 47-4.2 19 3.6 39.4 23 60.8l0.1 0.1c0.4 0.4 0.7 0.8 1.1 1.2 18.1 19.4 45.5 39.2 81.5 58.9 2.4 1.3 4.9 2.7 7.4 4 13.4 7.1 27.8 14.1 42.9 20.8 4.4 16.6 10.6 33.9 18.3 51.4 17.8 7.7 36.6 15.1 56.3 22.2-10.6-18.4-19.2-36.5-25.8-53.5 55.3 21.1 117.9 39.7 183.8 54.3 74 16.4 146.4 26.4 211.1 29.5-10.1 14.5-21.4 28.9-34.1 42.9 17.1 1.4 33.8 2.4 49.9 2.9 7.2-9.1 13.6-17.9 19.3-26.2 4.2-6.1 8.2-12.3 12.1-18.6 13.9-0.1 27.2-0.5 40.1-1.4 33.5-2.2 61.9-6.9 84.6-14 5-1.6 9.7-3.2 14.1-5 8.7-3.5 16.3-7.5 22.7-11.8-3.3-5.6-7.5-11-12.1-16.1-6.6 4.4-14.9 8.3-24.7 11.7-21.7 7.6-50.9 12.9-85.9 15.2-8.7 0.6-17.7 1-27 1.2 26.8-48.8 42.6-99.1 42.6-138.1V515c28 14.2 51.8 28.8 70.3 43.1 4.4 3.4 8.4 6.7 12.2 10.1 16.3 14.5 34.8 35.8 30.6 55-0.7 3-1.9 5.8-3.6 8.6 5.1 5.5 9.4 11 12.8 16.4 5.2-6.3 8.6-13.2 10.3-20.7 5-23-7.4-48-36.9-74.3z m-681.7-6.6c-0.7-0.4-1.5-0.8-2.2-1.2-33.9-18.7-59.6-37.7-75.5-55.3-0.1 0-0.1 0.1-0.2 0.1-6.3-6.4-10.4-13.4-11.9-16.1-5.6-9.7-7.8-18.6-6-26.6 4.8-21.9 39-38.3 93.6-46 10.9-1.5 22.6-2.7 35.1-3.5v137.8c0 9 0.9 18.7 2.5 28.8-12.4-5.9-24.3-11.9-35.4-18z m546-10.8c0 31.7-15.5 83.9-48.8 137.7-66.4-2.3-142-12.4-219.5-29.6-71.3-15.8-138.6-36.2-196.6-59.5-5.5-18.8-8.2-35.5-8.2-48.6V302.9c65.5-3.3 124.7-22.7 176.4-57.9 27.7-18.8 47.6-38.7 60.3-53.2 12.6 14.5 32.5 34.3 60.1 53.2 51.6 35.2 110.8 54.6 176.3 57.9v232.9z" fill="#005BFF" /><path d="M242.2 443.2c-40.1 2.5-73 8.7-97.6 18.3-9.6 3.7-17.9 8-24.8 12.7 3 5.2 7.1 10.5 12.1 16.1 21.2-14 59.5-23.5 110.3-26.9v-20.2z" fill="#06F3FF" /><path d="M119.7 474.1c1.5 2.7 5.7 9.7 11.9 16.1 0.1 0 0.1-0.1 0.2-0.1-4.9-5.5-9-10.8-12.1-16 0.1 0 0.1 0 0 0zM917.8 648.2c-3.5-5.4-7.8-10.9-12.8-16.4-4.1-4.4-8.6-8.9-13.7-13.4-22.8-20.3-56.1-41.2-97-61.1-0.4 2.7-2.2 14.7-3.4 20.7 36.8 18.3 66.6 37.2 87.1 55.4 4.2 3.7 8.5 7.9 12.5 12.3 4.6 5 8.8 10.5 12.1 16.1 5.1 8.7 7.9 17.9 6 26.6-5.8 26.1-53.9 44.6-128.6 49.5-21.8 1.4-45.4 1.7-70.2 0.9-16.1-0.5-32.8-1.5-49.9-2.9-54.2-4.5-112.8-13.5-172.6-26.8-57.7-12.8-112.7-28.6-162.3-46.5-19.7-7.1-38.5-14.5-56.3-22.2-21.2-9.2-41-18.8-59-28.6-65.7-35.9-101.5-73-95.8-99.1 0.7-3 1.9-5.9 3.6-8.6l-0.1-0.1c-0.9-0.9-6.6-6.7-12.8-16.3-5.2 6.3-8.6 13.2-10.3 20.7-4.3 19.4 3.9 40.3 24.3 62.1 18.1 19.4 45.5 39.2 81.5 58.9 24.4 13.3 51.9 26.2 81.8 38.2 19.1 7.7 39.2 15.1 60.2 22.2 44 14.8 91.5 28 140.9 38.9 54.8 12.1 108.7 20.8 159.2 25.7 17.6 1.7 34.8 3 51.4 3.8 14.7 0.7 28.9 1.1 42.7 1.1 15.6 0 30.7-0.5 45-1.4 40.9-2.7 74.1-9.1 98.7-19 27.7-11.2 43.9-26.7 48.2-46.1 3.1-14.2-0.4-29.1-10.4-44.6z" fill="#06F3FF" /><path d="M117.4 504.1s-0.1 0-0.1-0.1c0 0 0.1 0 0.1 0.1z" fill="#06F3FF" /></svg> </div> <div class="mt-6 text-center relative z-10 space-y-2"> <h2 class="text-lg font-medium text-gray-800 transition group-hover:text-purple-950 dark:text-white">Secure by default</h2> <p class="dark:text-gray-300 text-gray-700">Here you can view all the images Lorem Picsum provides.</p> </div> </div> </div> <div class="col-span-full sm:col-span-3 lg:col-span-2 overflow-hidden relative p-8 rounded-xl bg-white border border-gray-200 dark:border-gray-800 dark:bg-gray-900"> <div> <div class="pt-6 lg:px-6"> <img src="https://fastly.picsum.photos/id/58/1280/853.jpg?hmac=YO3QnOm9TpyM5DqsJjoM4CHg8oIq4cMWLpd9ALoP908"> </div> <div class="mt-14 text-center relative z-10 space-y-2"> <h2 class="text-lg font-medium text-gray-800 transition group-hover:text-purple-950 dark:text-white">Secure and Faster</h2> <p class="dark:text-gray-300 text-gray-700">Here you can view all the images Lorem Picsum provides.</p> </div> </div> </div> <div class="col-span-full lg:col-span-3 overflow-hidden relative p-8 rounded-xl bg-white border border-gray-200 dark:border-gray-800 dark:bg-gray-900"> <div class="grid sm:grid-cols-2"> <div class="flex flex-col justify-between relative z-10 space-y-12 lg:space-y-6"> <div class="relative aspect-square rounded-full size-12 flex border dark:bg-white/5 dark:border-white/10 before:absolute before:-inset-2 before:border dark:before:border-white/5 dark:before:bg-white/5 before:rounded-full"> <svg class="size-6 m-auto" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <path fill="none" stroke="currentColor" stroke-linejoin="round" d="M5.5 7c2 0 6.5-3 6.5-3s4.5 3 6.5 3v4.5C18.5 18 12 20 12 20s-6.5-2-6.5-8.5z"></path> </svg> </div> <div class="space-y-2"> <h2 class="text-lg font-medium text-gray-800 transition group-hover:text-purple-950 dark:text-white">Show graph Faster</h2> <p class="dark:text-gray-300 text-gray-700">Here you can view all the images Lorem Picsum provides.</p> </div> </div> <div class="overflow-hidden relative mt-6 sm:mt-auto h-fit -mb-[34px] -mr-[34px] sm:ml-6 py-6 p-6 border rounded-tl-lg dark:bg-white/5 dark:border-white/10"> <div class="absolute flex gap-1 top-2 left-3"> <span class="block size-2 rounded-full border dark:border-white/10 dark:bg-white/10"></span> <span class="block size-2 rounded-full border dark:border-white/10 dark:bg-white/10"></span> <span class="block size-2 rounded-full border dark:border-white/10 dark:bg-white/10"></span> </div> <svg width="200px" height="200px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M928.1 881v44H95.9V99h44v782z" fill="#39393A" /><path d="M352 435.7v403.4H204V435.7h148m22-22H182v447.4h192V413.7zM608 307.9v531.2H460V307.9h148m22-22H438v575.2h192V285.9z" fill="#39393A" /><path d="M866.1 177.3v663.9H714V177.3h152.1m20-20H694v703.9h192V157.3h0.1z" fill="#E73B37" /></svg> </div> </div> </div> <div class="col-span-full lg:col-span-3 overflow-hidden relative p-8 rounded-xl bg-white border border-gray-200 dark:border-gray-800 dark:bg-gray-900"> <div class="h-full grid sm:grid-cols-2"> <div class="flex flex-col justify-between relative z-10 space-y-12 lg:space-y-6"> <div class="relative aspect-square rounded-full size-12 flex border dark:bg-white/5 dark:border-white/10 before:absolute before:-inset-2 before:border dark:before:border-white/5 dark:before:bg-white/5 before:rounded-full"> <svg class="size-6 m-auto" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"> <g fill="none"> <path stroke="currentColor" d="M9 6a3 3 0 1 0 6 0a3 3 0 0 0-6 0zm-4.562 7.902a3 3 0 1 0 3 5.195a3 3 0 0 0-3-5.196zm15.124 0a2.999 2.999 0 1 1-2.998 5.194a2.999 2.999 0 0 1 2.998-5.194z"></path> <path fill="currentColor" fill-rule="evenodd" d="M9.003 6.125a2.993 2.993 0 0 1 .175-1.143a8.507 8.507 0 0 0-5.031 4.766a8.5 8.5 0 0 0-.502 4.817a3 3 0 0 1 .902-.723a7.498 7.498 0 0 1 4.456-7.717m5.994 0a7.499 7.499 0 0 1 4.456 7.717a2.998 2.998 0 0 1 .902.723a8.5 8.5 0 0 0-5.533-9.583a3 3 0 0 1 .175 1.143m2.536 13.328a3.002 3.002 0 0 1-1.078-.42a7.501 7.501 0 0 1-8.91 0l-.107.065a3 3 0 0 1-.971.355a8.5 8.5 0 0 0 11.066 0" clip-rule="evenodd"></path> </g> </svg> </div> <div class="space-y-2"> <h2 class="text-lg font-medium text-gray-800 transition group-hover:text-purple-950 dark:text-white">Keep your loved ones safe</h2> <p class="dark:text-gray-300 text-gray-700">Here you can view all the images Lorem Picsum provides.</p> </div> </div> <div class="mt-6 relative sm:-mr-[--card-padding] sm:-my-8 before:absolute before:w-px before:inset-0 before:mx-auto before:bg-gray-200 dark:before:bg-gray-800"> <div class="relative space-y-6 py-6 flex flex-col justify-center h-full"> <svg width="250px" height="100px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512.7 472.2l-43.3 75.1h86.7z" fill="#843A5F" /><path d="M633.6 174.6H392.9l-73.8 347 194.1 215.7 193.1-214.5 1-1.2z" fill="#843A5F" /><path d="M512.4 656.8m-214 0a214 214 0 1 0 428 0 214 214 0 1 0-428 0Z" fill="#AE9AA4" /><path d="M512.4 873.8c-58 0-112.5-22.6-153.5-63.6s-63.6-95.5-63.6-153.5 22.6-112.5 63.6-153.5 95.5-63.6 153.5-63.6 112.5 22.6 153.5 63.6 63.6 95.5 63.6 153.5-22.6 112.5-63.6 153.5c-41.1 41-95.6 63.6-153.5 63.6z m0-428c-116.4 0-211 94.7-211 211s94.7 211 211 211c116.4 0 211-94.7 211-211s-94.7-211-211-211z" fill="#843A5F" /><path d="M512.4 578l-70.5-121.9h140.9z" fill="#FFFFFF" /><path d="M512.4 584l-75.6-131H588l-75.6 131z m-65.3-124.9l65.2 113 65.2-113H447.1zM675.2 185.4l-0.2-0.4c-5.8-18.4-14.7-35.6-26.3-51.1l-0.1-0.2c-5.5-7.3-11.7-14.3-18.4-20.7-19.6-18.8-43.7-32.8-69.7-40.4-15.6-4.6-31.8-6.9-48.2-6.9-14.3 0-28.6 1.8-42.3 5.3-1.8 0.5-3.2 0.8-4.5 1.2-26.8 7.6-51.6 21.9-71.7 41.4-26.8 25.9-44.1 59-49.9 95.6-1.4 8.8-2.1 17.9-2.1 27 0 15.1 2 30 5.9 44.4 2 7.6 4.6 15.1 7.7 22.2 26.8 63.1 88.4 103.8 157 103.8 63.5 0 121.3-34.9 150.9-91 4.3-8 7.9-16.6 10.8-25.3 5.8-17.4 8.8-35.6 8.8-54.1 0-17.3-2.6-34.4-7.7-50.8z" fill="#843A5F" /><path d="M364.9 294.4a149.1 176.4 0 1 0 298.2 0 149.1 176.4 0 1 0-298.2 0Z" fill="#E6D8DF" /><path d="M514 473.8c-83.9 0-152.1-80.5-152.1-179.4S430.2 115 514 115s152.1 80.5 152.1 179.4S597.9 473.8 514 473.8z m0-352.8c-80.6 0-146.1 77.8-146.1 173.4S433.5 467.8 514 467.8c80.6 0 146.1-77.8 146.1-173.4S594.6 121 514 121z" fill="#843A5F" /><path d="M513.5 412.1c-23.1 0-46.5-5.6-46.5-16.3h6c0 3.5 14.3 10.3 40.5 10.3s40.5-6.8 40.5-10.3h6c0 10.7-23.4 16.3-46.5 16.3z" fill="#843A5F" /><path d="M750 923.1H275.5c-6.6 0-12-5.4-12-12V535.5c0-6.6 5.4-12 12-12H750c6.6 0 12 5.4 12 12v375.6c0 6.6-5.4 12-12 12z" fill="#FFFFFF" /><path d="M750 926.1H275.5c-8.3 0-15-6.7-15-15V535.5c0-8.3 6.7-15 15-15H750c8.3 0 15 6.7 15 15v375.6c0 8.3-6.7 15-15 15zM275.5 526.5c-5 0-9 4-9 9v375.6c0 5 4 9 9 9H750c5 0 9-4 9-9V535.5c0-5-4-9-9-9H275.5z" fill="#843A5F" /><path d="M287.7 749.9c-12.9 18-33.9 18-46.8 0s-12.9-47.1 0-65c12.9-18 33.9-18 46.8 0 12.9 17.9 12.9 47 0 65z" fill="#E6D8DF" /><path d="M264.3 766.4c-9.8 0-19-5.2-25.8-14.7-13.6-18.9-13.6-49.7 0-68.6 6.8-9.5 16-14.7 25.8-14.7s19 5.2 25.8 14.7c13.6 18.9 13.6 49.7 0 68.6-6.8 9.4-16 14.7-25.8 14.7z m0-92c-7.8 0-15.3 4.3-21 12.2-12.2 17-12.2 44.6 0 61.5 5.7 7.9 13.1 12.2 21 12.2s15.3-4.3 21-12.2c12.2-17 12.2-44.6 0-61.5-5.8-7.9-13.2-12.2-21-12.2z" fill="#843A5F" /><path d="M785.8 749.9c-12.9 18-33.9 18-46.8 0s-12.9-47.1 0-65c12.9-18 33.9-18 46.8 0 12.9 17.9 12.9 47 0 65z" fill="#E6D8DF" /><path d="M762.4 766.4c-9.8 0-19-5.2-25.8-14.7-13.6-18.9-13.6-49.7 0-68.6 6.8-9.5 16-14.7 25.8-14.7s19 5.2 25.8 14.7c13.6 18.9 13.6 49.7 0 68.6-6.8 9.4-16 14.7-25.8 14.7z m0-92c-7.8 0-15.3 4.3-21 12.2-12.2 17-12.2 44.6 0 61.5 5.7 7.9 13.1 12.2 21 12.2s15.3-4.3 21-12.2c12.2-17 12.2-44.6 0-61.5-5.7-7.9-13.1-12.2-21-12.2z" fill="#843A5F" /><path d="M635.3 137.5L583 108.3l-2.7 2c-5-3.1-17.7-4.9-49.6-2.6-23.6 1.7-47.2 4.9-47.4 5l-0.4 0.1-94.4 42.2-32 20.3 4.8 126.4c-0.6 3.9-0.6 6.1-0.6 6.4v0.5l7.8 23.4-1.1-29.9c1.4-9.3 5.9-28.5 19.6-51.1 17.9-29.4 55.8-70.8 134.5-100.6 3-1.1 5.8-2.2 8.5-3.3l-1.6 1.2h9.2c43.5 0 74.8 45.5 93.5 83.7 20.5 42 30.5 84.5 30.6 85l5.7 24.7 1.2-154.2-33.3-50z" fill="#843A5F" /><path d="M572 320.7a29.7 16.3 0 1 0 59.4 0 29.7 16.3 0 1 0-59.4 0Z" fill="#FF9FB9" /><path d="M578 257.3c-11.5 0-20.9 12.7-20.9 28.4S566.5 314 578 314s20.9-12.7 20.9-28.4-9.4-28.3-20.9-28.3z" fill="#843A5F" /><path d="M569 291.8a9 9.9 0 1 0 18 0 9 9.9 0 1 0-18 0Z" fill="#FFFFFF" /><path d="M547 253.7c8.3-8.1 19-13.6 30.2-16.4 14.2-3.6 24.8 3.1 34.8 12.6 1.4 1.3 3.5-0.8 2.1-2.1-9.5-9.1-20.5-16.6-34.3-14.2-12.9 2.3-25.6 8.8-35 17.9-1.3 1.4 0.8 3.5 2.2 2.2z" fill="#843A5F" /><path d="M396.7 320.7a29.7 16.3 0 1 0 59.4 0 29.7 16.3 0 1 0-59.4 0Z" fill="#FF9FB9" /><path d="M450.1 257.3c-11.5 0-20.9 12.7-20.9 28.4s9.4 28.4 20.9 28.4 20.9-12.7 20.9-28.4-9.4-28.4-20.9-28.4z" fill="#843A5F" /><path d="M441.1 291.8a9 9.9 0 1 0 18 0 9 9.9 0 1 0-18 0Z" fill="#FFFFFF" /><path d="M483.2 251.5c-9.3-9.1-22.1-15.6-35-17.9-13.8-2.4-24.7 5-34.3 14.2-1.4 1.3 0.7 3.5 2.1 2.1 9.9-9.5 20.6-16.2 34.8-12.6 11.2 2.8 21.9 8.3 30.2 16.4 1.5 1.3 3.6-0.8 2.2-2.2z" fill="#843A5F" /><path d="M632 893.6H392.1c-6.6 0-12-5.4-12-12V565.5c0-6.6 5.4-12 12-12H632c6.6 0 12 5.4 12 12v316.2c0 6.5-5.4 11.9-12 11.9z" fill="#843A5F" /><path d="M632 896.6H392.1c-8.3 0-15-6.7-15-15V565.5c0-8.3 6.7-15 15-15H632c8.3 0 15 6.7 15 15v316.2c0 8.2-6.8 14.9-15 14.9zM392.1 556.5c-5 0-9 4-9 9v316.2c0 5 4 9 9 9H632c5 0 9-4 9-9V565.5c0-5-4-9-9-9H392.1z" fill="#843A5F" /><path d="M436.1 706h-8.9v-2h27.1v2h-7.6c0 6.7-2.1 11.5-6.4 14.4-4.3 2.9-8.8 4.4-13.5 4.4-6.8 0-12.6-2.7-17.1-8.2-4.6-5.5-6.8-11.9-6.8-19.2 0-7.4 2.3-13.8 7-19.3 4.7-5.4 10.5-8.1 17.4-8.1 3.6 0 7 1 10.3 3.1 1 0.6 1.7 0.9 2.1 0.9 0.8 0 1.7-0.7 2.5-2.2h1.8l0.5 14.2h-2c-2.2-9.4-7.3-14.1-15.4-14.1-4.2 0-7.3 0.9-9.2 2.8-1.9 1.9-3.1 4.3-3.5 7.1-0.4 2.9-0.6 7-0.6 12.3 0 9.6 0.3 16 1 19.1 0.6 3.1 1.9 5.5 3.9 7.1 2 1.6 4.4 2.4 7.3 2.4 2.3 0 4.3-0.5 6.1-1.4 1.8-0.9 2.9-2.3 3.4-4.2 0.5-1.9 0.7-4.6 0.7-8.3V706zM484.1 724.8c-6.8 0-12.5-2.8-17.2-8.5-4.7-5.7-7.1-11.7-7.1-18.2 0-7.8 2.5-14.4 7.4-19.9 5-5.5 10.7-8.2 17.3-8.2 6.2 0 11.7 2.8 16.6 8.4 4.9 5.6 7.3 11.9 7.3 19 0 7.3-2.5 13.7-7.4 19.2-4.8 5.4-10.5 8.2-16.9 8.2z m0.2-52.8c-2.9 0-5.4 0.7-7.7 2s-3.8 3.6-4.6 6.9c-0.8 3.3-1.2 8.9-1.2 17 0 5.6 0.2 10.1 0.7 13.4 0.5 3.3 1.7 6.1 3.6 8.3s4.9 3.3 9 3.3c2.5 0 5-0.7 7.5-2s4.2-3.9 4.9-7.8c0.8-3.9 1.2-9.9 1.2-17.9 0-7.3-0.5-12.4-1.4-15.2-1-2.8-2.5-4.8-4.6-6-2.2-1.4-4.7-2-7.4-2zM533.9 673.2v48.4h11.8c2.3 0 4-0.2 5.4-0.5 1.3-0.3 2.6-1.2 3.8-2.5 1.3-1.3 2.2-2.9 2.9-4.6 0.7-1.8 1.4-4.3 2.2-7.5h1.8l-1.4 17.1h-44v-2h8.2v-48.4h-8.2v-2h26.3v2h-8.8zM575.9 721.6v-48.4h-8.2v-2h24.7c5.5 0 10.1 0.8 14 2.3 3.9 1.5 7.1 4.6 9.7 9.1 2.6 4.5 3.9 9.4 3.9 14.7 0 5.6-1.4 10.6-4.3 15s-6.2 7.4-9.9 8.9-8.3 2.3-13.7 2.3h-24.6v-2h8.4z m9.3-48.4v48.4h6.8c3.6 0 6.5-0.3 8.7-1 2.3-0.7 4.1-2.1 5.6-4.3 1.5-2.2 2.5-5 3-8.3 0.5-3.4 0.8-7.7 0.8-13.2 0-6.5-0.8-11.4-2.5-14.6-1.7-3.2-3.7-5.2-6.1-6-2.4-0.8-5.5-1.2-9.4-1.2h-6.9z" fill="#FFFFFF" /><path d="M454.6 800.7l4.1-0.4c0.3 1.9 1 3.3 2 4.1s2.2 1.3 3.7 1.3c1.3 0 2.4-0.3 3.4-0.9s1.8-1.4 2.4-2.4 1.1-2.3 1.6-4 0.6-3.4 0.6-5.2v-0.8c-0.8 1.3-2 2.4-3.5 3.3-1.5 0.9-3.1 1.3-4.9 1.3-2.5 0-5-1-6.8-2.8-2.2-2.1-3.2-4.9-3.2-8.4s1-6.3 3.1-8.4 4.6-3.2 7.7-3.2c2.2 0 4.3 0.6 6.1 1.8s3.3 2.9 4.2 5.1 1.4 5.4 1.4 9.7c0 4.4-0.5 7.9-1.4 10.5s-2.4 4.6-4.3 5.9-4.1 2-6.6 2c-2.7 0-4.9-0.7-6.6-2.2s-2.7-3.6-3-6.3z m17.3-15.2c0-2.4-0.6-4.3-1.9-5.8s-2.8-2.1-4.7-2.1c-1.9 0-3.5 0.8-4.9 2.3s-2.1 3.5-2.1 6c0 2.2 0.7 4 2 5.3s2.9 2.1 4.9 2.1c2 0 3.6-0.7 4.8-2.1s1.9-3.3 1.9-5.7zM481.3 800.7l4.1-0.4c0.3 1.9 1 3.3 2 4.1s2.2 1.3 3.7 1.3c1.3 0 2.4-0.3 3.4-0.9s1.8-1.4 2.4-2.4 1.1-2.3 1.6-4 0.6-3.4 0.6-5.2v-0.8c-0.8 1.3-2 2.4-3.5 3.3-1.5 0.9-3.1 1.3-4.9 1.3-2.5 0-5-1-6.8-2.8-2.2-2.1-3.2-4.9-3.2-8.4s1-6.3 3.1-8.4 4.6-3.2 7.7-3.2c2.2 0 4.3 0.6 6.1 1.8s3.3 2.9 4.2 5.1 1.4 5.4 1.4 9.7c0 4.4-0.5 7.9-1.4 10.5s-2.4 4.6-4.3 5.9-4.1 2-6.6 2c-2.7 0-4.9-0.7-6.6-2.2s-2.7-3.6-3-6.3z m17.3-15.2c0-2.4-0.6-4.3-1.9-5.8s-2.8-2.1-4.7-2.1c-1.9 0-3.5 0.8-4.9 2.3s-2.1 3.5-2.1 6c0 2.2 0.7 4 2 5.3s2.9 2.1 4.9 2.1c2 0 3.6-0.7 4.8-2.1s1.9-3.3 1.9-5.7zM508 800.7l4.1-0.4c0.3 1.9 1 3.3 2 4.1s2.2 1.3 3.7 1.3c1.3 0 2.4-0.3 3.4-0.9s1.8-1.4 2.4-2.4 1.1-2.3 1.6-4 0.6-3.4 0.6-5.2v-0.8c-0.8 1.3-2 2.4-3.5 3.3-1.5 0.9-3.1 1.3-4.9 1.3-2.5 0-5-1-6.8-2.8-2.2-2.1-3.2-4.9-3.2-8.4s1-6.3 3.1-8.4c2.1-2.1 4.6-3.2 7.7-3.2 2.2 0 4.3 0.6 6.1 1.8s3.3 2.9 4.2 5.1 1.4 5.4 1.4 9.7c0 4.4-0.5 7.9-1.4 10.5s-2.4 4.6-4.3 5.9-4.1 2-6.6 2c-2.7 0-4.9-0.7-6.6-2.2-1.6-1.5-2.7-3.6-3-6.3z m17.3-15.2c0-2.4-0.6-4.3-1.9-5.8s-2.8-2.1-4.7-2.1c-1.9 0-3.5 0.8-4.9 2.3s-2.1 3.5-2.1 6c0 2.2 0.7 4 2 5.3s2.9 2.1 4.9 2.1c2 0 3.6-0.7 4.8-2.1s1.9-3.3 1.9-5.7zM536.4 808.6v-4.8h4.8v4.8h-4.8zM548 800.7l4.1-0.4c0.3 1.9 1 3.3 2 4.1s2.2 1.3 3.7 1.3c1.3 0 2.4-0.3 3.4-0.9s1.8-1.4 2.4-2.4 1.1-2.3 1.6-4 0.6-3.4 0.6-5.2v-0.8c-0.8 1.3-2 2.4-3.5 3.3-1.5 0.9-3.1 1.3-4.9 1.3-2.5 0-5-1-6.8-2.8-2.2-2.1-3.2-4.9-3.2-8.4s1-6.3 3.1-8.4 4.6-3.2 7.7-3.2c2.2 0 4.3 0.6 6.1 1.8s3.3 2.9 4.2 5.1 1.4 5.4 1.4 9.7c0 4.4-0.5 7.9-1.4 10.5s-2.4 4.6-4.3 5.9-4.1 2-6.6 2c-2.7 0-4.9-0.7-6.6-2.2s-2.6-3.6-3-6.3z m17.3-15.2c0-2.4-0.6-4.3-1.9-5.8s-2.8-2.1-4.7-2.1c-1.9 0-3.5 0.8-4.9 2.3s-2.1 3.5-2.1 6c0 2.2 0.7 4 2 5.3s2.9 2.1 4.9 2.1c2 0 3.6-0.7 4.8-2.1s1.9-3.3 1.9-5.7z" fill="#FFFFFF" /></svg> </div> </div> </div> </div> </div> </div> </div> </div> </section> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Bento Box in Tailwind CSS component, Use in your dashboard to display dynamic data. Catagory Tailwind Tags Box CSS Card Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
