Blocks - Tiles
Copy any custom block snippet below and paste it on your page to build your website easily.
Tiles 1
<div className="flex flex-wrap xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mx-[-15px] !mt-[-25px] items-center">
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div className="xl:w-10/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[16.66666667%] md:w-10/12 md:!ml-[16.66666667%] w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/ab1.jpg" srcset="/assets/img/photos/ab1@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/ab2.jpg" srcset="/assets/img/photos/ab2@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/ab3.jpg" srcset="/assets/img/photos/ab3@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
</div>Tiles 2
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div className="xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !self-end !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g1.jpg" srcset="/assets/img/photos/g1@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !self-end !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g2.jpg" srcset="/assets/img/photos/g2@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g3.jpg" srcset="/assets/img/photos/g3@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !self-start !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g4.jpg" srcset="/assets/img/photos/g4@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
</div>Tiles 3
<div className="flex flex-wrap xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] mx-[-15px] !mt-[-25px] items-center">
<div className="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" src="/assets/img/photos/sa13.jpg" srcset="/assets/img/photos/sa13@2x.jpg 2x" alt="image">
</div>
<!-- /column -->
<div className="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="/assets/img/photos/sa14.jpg" srcset="/assets/img/photos/sa14@2x.jpg 2x" alt="image">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="/assets/img/photos/sa15.jpg" srcset="/assets/img/photos/sa15@2x.jpg 2x" alt="image">
</div>
<!-- /column -->
</div>Tiles 4
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div className="w-5/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" src="/assets/img/photos/sa9.jpg" srcset="/assets/img/photos/sa9@2x.jpg 2x" alt="image">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="/assets/img/photos/sa10.jpg" srcset="/assets/img/photos/sa10@2x.jpg 2x" alt="image">
</div>
<!-- /column -->
<div className="w-7/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="/assets/img/photos/sa11.jpg" srcset="/assets/img/photos/sa11@2x.jpg 2x" alt="image">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" src="/assets/img/photos/sa12.jpg" srcset="/assets/img/photos/sa12@2x.jpg 2x" alt="image">
</div>
<!-- /column -->
</div>Tiles 5
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div className="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="/assets/img/photos/sa5.jpg" srcset="/assets/img/photos/sa5@2x.jpg 2x" alt="image">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" src="/assets/img/photos/sa6.jpg" srcset="/assets/img/photos/sa6@2x.jpg 2x" alt="image">
</div>
<!-- /column -->
<div className="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="/assets/img/photos/sa7.jpg" srcset="/assets/img/photos/sa7@2x.jpg 2x" alt="image">
<Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" src="/assets/img/photos/sa8.jpg" srcset="/assets/img/photos/sa8@2x.jpg 2x" alt="image">
</div>
<!-- /column -->
</div>Tiles 6
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] !px-[15px] max-w-full">
<figure className="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><Image className="!rounded-[.4rem]" src="/assets/img/photos/g5.jpg" srcset="/assets/img/photos/g5@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] !px-[15px] max-w-full">
<div className="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div className="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g6.jpg" srcset="/assets/img/photos/g6@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] !mt-[25px] max-w-full">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g7.jpg" srcset="/assets/img/photos/g7@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>Tiles 7
<div className="flex flex-wrap mx-[-10px] !mt-[-20px]">
<div className="w-4/12 flex-[0_0_auto] px-[10px] max-w-full !mt-[20px] flex flex-col !ml-auto">
<div className="ml-auto !mt-6"><Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="/assets/img/demos/vc1.jpg" srcset="/assets/img/demos/vc1@2x.jpg 2x" alt="image"></div>
<div className="ml-auto !mt-4"><Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="/assets/img/demos/vc2.jpg" srcset="/assets/img/demos/vc2@2x.jpg 2x" alt="image"></div>
<div className="ml-auto !mt-4"><Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="/assets/img/demos/vc3.jpg" srcset="/assets/img/demos/vc3@2x.jpg 2x" alt="image"></div>
</div>
<!-- /column -->
<div className="w-4/12 flex-[0_0_auto] px-[10px] max-w-full !mt-[20px]">
<div><Image className="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="/assets/img/demos/vc4.jpg" srcset="/assets/img/demos/vc4@2x.jpg 2x" alt="image"></div>
<div><Image className="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4" src="/assets/img/demos/vc5.jpg" srcset="/assets/img/demos/vc5@2x.jpg 2x" alt="image"></div>
<div><Image className="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4" src="/assets/img/demos/vc6.jpg" srcset="/assets/img/demos/vc6@2x.jpg 2x" alt="image"></div>
</div>
<!-- /column -->
<div className="w-4/12 flex-[0_0_auto] px-[10px] max-w-full !mt-[20px] flex flex-col">
<div className="!mt-8"><Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="/assets/img/demos/vc7.jpg" srcset="/assets/img/demos/vc7@2x.jpg 2x" alt="image"></div>
<div className="!mt-4 !mb-10"><Image className="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="/assets/img/demos/vc8.jpg" srcset="/assets/img/demos/vc8@2x.jpg 2x" alt="image"></div>
</div>
<!-- /column -->
</div>Tiles 8
<div className="flex flex-wrap !relative overlap-grid-2">
<div className="item xl:w-[70%] xl:z-[3] xl:ml-[30%] xl:!mt-0 lg:w-[70%] lg:z-[3] lg:ml-[30%] lg:!mt-0 md:w-[70%] md:z-[3] md:ml-[30%] md:!mt-0">
<figure className="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)]"><Image className="!rounded-[.4rem]" src="/assets/img/photos/about2.jpg" srcset="/assets/img/photos/about2@2x.jpg 2x" alt="image"></figure>
</div>
<!--/.item -->
<div className="item xl:w-[55%] xl:!mt-[-45%] xl:z-[4] xl:ml-0 lg:w-[55%] lg:!mt-[-45%] lg:z-[4] lg:ml-0 md:w-[55%] md:!mt-[-45%] md:z-[4] md:ml-0">
<figure className="!rounded-[.4rem] shadow-[0_0_1.25rem_rgba(30,34,40,0.04)]"><Image className="!rounded-[.4rem]" src="/assets/img/photos/about3.jpg" srcset="/assets/img/photos/about3@2x.jpg 2x" alt="image"></figure>
</div>
<!--/.item -->
</div>Tiles 9
<div className="flex flex-wrap xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] max-w-full !mx-auto !mt-[-25px]">
<div className="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><Image className="!rounded-[.4rem]" src="/assets/img/photos/g8.jpg" srcset="/assets/img/photos/g8@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g9.jpg" srcset="/assets/img/photos/g9@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g10.jpg" srcset="/assets/img/photos/g10@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
</div>Tiles 10
<div className="flex flex-wrap xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] max-w-full !mx-auto !mt-[-25px]">
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g12.jpg" srcset="/assets/img/photos/g12@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] px-[12.5px] max-w-full !self-end !mt-[25px]">
<figure className="rounded-[0.4rem]"><Image className="rounded-[0.4rem]" src="/assets/img/photos/g13.jpg" srcset="/assets/img/photos/g13@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
<div className="w-full flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !px-[15px] max-w-full !mt-[25px]">
<figure className="!rounded-[.4rem] xl:!mx-5 lg:!mx-5 md:!mx-5"><Image className="!rounded-[.4rem]" src="/assets/img/photos/g11.jpg" srcset="/assets/img/photos/g11@2x.jpg 2x" alt="image"></figure>
</div>
<!--/column -->
</div>Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox