Skip to content

Instantly share code, notes, and snippets.

@dazeb

dazeb/LinkGrid.vue

Created July 2, 2023 08:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dazeb/fd823a1344a43ce5e4d2373e69a731f5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dazeb/fd823a1344a43ce5e4d2373e69a731f5 to your computer and use it in GitHub Desktop.
Download ZIP
linkgrid
Raw
LinkGrid.vue
<template>
<section class="bg-white dark:bg-gray-900 dark:text-white">
<div
class="mx-auto max-w-screen-xl px-4 py-4 sm:py-6 sm:px-6 lg:py-16 lg:px-8"
>
<!-- <div class="mx-auto max-w-lg text-center">
<h2 class="text-3xl font-bold sm:text-4xl">Kickstart your marketing</h2>
<p class="mt-4 text-gray-500 dark:text-gray-300">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur
aliquam doloribus nesciunt eos fugiat. Vitae aperiam fugit consequuntur
saepe laborum.
</p>
</div> -->
<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<a
class="block rounded-xl border border-gray-300 dark:border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-primary-500/20 dark:hover:border-blue-500/20 dark:hover:shadow-primary-500/20"
href="/services/digital-campaigns"
>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> -->
<Icon name="💎" size="24" />
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-gray-300">
Digital campaigns
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
possimus adipisci distinctio alias voluptatum blanditiis laudantium.
</p>
</a>
<a
class="block rounded-xl border border-gray-300 dark:border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-primary-500/20 dark:hover:border-blue-500/20 dark:hover:shadow-primary-500/20"
href="/services/digital-campaigns"
>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> -->
<Icon name="👾" size="24" />
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-gray-300">
Digital campaigns
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
possimus adipisci distinctio alias voluptatum blanditiis laudantium.
</p>
</a>
<a
class="block rounded-xl border border-gray-300 dark:border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-primary-500/20 dark:hover:border-blue-500/20 dark:hover:shadow-primary-500/20"
href="/services/digital-campaigns"
>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> -->
<Icon name="🎨" size="24" />
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-gray-300">
Digital campaigns
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
possimus adipisci distinctio alias voluptatum blanditiis laudantium.
</p>
</a>
<a
class="block rounded-xl border border-gray-300 dark:border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-primary-500/20 dark:hover:border-blue-500/20 dark:hover:shadow-primary-500/20"
href="/services/digital-campaigns"
>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> -->
<Icon name="🎁" size="24" />
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-gray-300">
Digital campaigns
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
possimus adipisci distinctio alias voluptatum blanditiis laudantium.
</p>
</a>
<a
class="block rounded-xl border border-gray-300 dark:border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-primary-500/20 dark:hover:border-blue-500/20 dark:hover:shadow-primary-500/20"
href="/services/digital-campaigns"
>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> -->
<Icon name="🎉" size="24" />
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-gray-300">
Digital campaigns
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
possimus adipisci distinctio alias voluptatum blanditiis laudantium.
</p>
</a>
<a
class="block rounded-xl border border-gray-300 dark:border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-primary-500/20 dark:hover:border-blue-500/20 dark:hover:shadow-primary-500/20"
href="/services/digital-campaigns"
>
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path
d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg> -->
<Icon name="🚀" size="24" />
<h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-gray-300">
Digital campaigns
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo
possimus adipisci distinctio alias voluptatum blanditiis laudantium.
</p>
</a>
</div>
<!-- <div class="mt-12 text-center">
<a href="#"
class="inline-block rounded bg-blue-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-blue-700 focus:outline-none focus:ring focus:ring-yellow-400">
Get Started Today
</a>
</div> -->
</div>
</section>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment