beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
khatabwedaa 2020-05-07 16:53:58 +02:00
parent 2afac02e46
commit 974d067a2e
3 changed files with 77 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Header.vue
View file

@ -25,7 +25,7 @@
<h1 class="font-semibold text-2xl mt-2 text-white md:text-3xl">Meraki <span class="text-blue-400">UI</span> Components</h1>
<p class="mt-2 text-gray-300">
Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">tailwindcss</a>
components that support RTL languages & fully responsive based on flexbox, built by
components that support RTL languages & fully responsive based on Flexbox & CSS Grid, built by
<a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
<a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
</p>

46
src/components/UI/Footers/FooterWithSubscribeForm.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<div :id="name | toId">
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
<div class="container py-6">
<h1 class="text-center text-lg font-bold 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 rounded-lg">
<div class="flex flex-wrap justify-between md:flex-row">
<input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none" placeholder="Enter your email">
<button class="w-full m-1 p-2 text-sm bg-gray-800 rounded-lg font-semibold uppercase lg:w-auto">subscribe</button>
</div>
</div>
</div>
<hr class="h-px mt-6 bg-gray-700 border-none">
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div>
<a href="#" class="text-xl font-bold">Brand</a>
</div>
<div class="flex mt-4 md:m-0">
<div class="-mx-4">
<a href="#" class="px-4 text-sm">About</a>
<a href="#" class="px-4 text-sm">Blog</a>
<a href="#" class="px-4 text-sm">News</a>
<a href="#" class="px-4 text-sm">Contact</a>
</div>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Footer With Subscribe Form',
}
}
}
</script>

30
src/components/UI/Null/ParagraphWithImage.vue Normal file
View file

@ -0,0 +1,30 @@
<template>
<div :id="name | toId">
<div>
<div class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
<div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
<div class="lg:w-1/2">
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
</div>
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
<h2 class="text-3xl text-gray-800 font-bold">Build Your New <span class="text-indigo-600">Idea</span></h2>
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8">
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Paragraph With Image'
}
}
}
</script>