mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-10 07:25:34 +00:00
Move all files and migrated it 🌪
This commit is contained in:
khatabwedaa
67
components/ui/Footers/Simple.vue
Normal file
67
components/ui/Footers/Simple.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<footer class="flex flex-col items-center justify-between px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
|
||||
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
||||
|
||||
<p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
|
||||
|
||||
<div class="flex -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Simple',
|
||||
code: `
|
||||
<footer class="flex flex-col items-center justify-between px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
|
||||
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
||||
|
||||
<p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
|
||||
|
||||
<div class="flex -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</footer>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
161
components/ui/Footers/WithDetails.vue
Normal file
161
components/ui/Footers/WithDetails.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<footer class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto">
|
||||
<div class="lg:flex">
|
||||
<div class="w-full -mx-6 lg:w-2/5">
|
||||
<div class="px-6">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
|
||||
|
||||
<div class="flex mt-4 -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 lg:mt-0 lg:flex-1">
|
||||
<div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4">
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">About</h3>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">Blog</h3>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">Products</h3>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">Contact</h3>
|
||||
<span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
|
||||
<span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px my-6 bg-gray-300 border-none dark:bg-gray-700">
|
||||
|
||||
<div>
|
||||
<p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Details',
|
||||
code: `
|
||||
<footer class="bg-white dark:bg-gray-800">
|
||||
<div class="container px-6 py-4 mx-auto">
|
||||
<div class="lg:flex">
|
||||
<div class="w-full -mx-6 lg:w-2/5">
|
||||
<div class="px-6">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
|
||||
|
||||
<div class="flex mt-4 -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
|
||||
<svg class="w-4 h-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 lg:mt-0 lg:flex-1">
|
||||
<div class="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4">
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">About</h3>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">Blog</h3>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">Products</h3>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
|
||||
<a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-gray-700 uppercase dark:text-white">Contact</h3>
|
||||
<span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
|
||||
<span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px my-6 bg-gray-300 border-none dark:bg-gray-700">
|
||||
|
||||
<div>
|
||||
<p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
83
components/ui/Footers/WithSubscribeForm.vue
Normal file
83
components/ui/Footers/WithSubscribeForm.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code">
|
||||
<div class="py-6" slot="component">
|
||||
<footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-800">
|
||||
<div class="container py-6">
|
||||
<h1 class="text-lg font-bold text-center lg:text-2xl">
|
||||
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
|
||||
</h1>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="bg-white border rounded-md focus-within:ring focus-within:border-blue-500">
|
||||
<div class="flex flex-wrap justify-between md:flex-row">
|
||||
<input type="email" class="p-2 m-1 text-sm text-gray-700 appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="w-full p-2 m-1 text-sm font-semibold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded lg:w-auto hover:bg-gray-700">subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px mt-6 bg-gray-200 border-none dark:bg-gray-700">
|
||||
|
||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-4 md:m-0">
|
||||
<div class="-mx-4">
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'With Subscribe Form',
|
||||
code: `
|
||||
<footer class="flex justify-center px-4 text-gray-800 bg-white dark:text-white dark:bg-gray-800">
|
||||
<div class="container py-6">
|
||||
<h1 class="text-lg font-bold text-center lg:text-2xl">
|
||||
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
|
||||
</h1>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="bg-white border rounded-md focus-within:ring focus-within:border-blue-500">
|
||||
<div class="flex flex-wrap justify-between md:flex-row">
|
||||
<input type="email" class="p-2 m-1 text-sm text-gray-700 appearance-none focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="w-full p-2 m-1 text-sm font-semibold text-white uppercase transition-colors duration-200 transform bg-gray-800 rounded lg:w-auto hover:bg-gray-700">subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="h-px mt-6 border-gray-300 border-none dark:bg-gray-700">
|
||||
|
||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||
<div>
|
||||
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-4 md:m-0">
|
||||
<div class="-mx-4">
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
|
||||
<a href="#" class="px-4 text-sm font-medium text-gray-800 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user