Make ProjectCard clickable

This commit is contained in:
Oliver Davies 2019-04-24 10:33:06 +01:00
parent 9b8695eb52
commit adfc0ae3f5
2 changed files with 13 additions and 11 deletions

View file

@ -1,17 +1,19 @@
<template> <template>
<article class="w-full sm:w-1/2 md:w-1/3 px-4 mb-8"> <article class="w-full sm:w-1/2 md:w-1/3 px-4 mb-8">
<div class="bg-gray-100 shadow-lg rounded overflow-hidden"> <a href="#" class="group">
<div class="p-6"> <span class="block bg-gray-100 shadow-lg rounded overflow-hidden">
<h2 class="font-bold text-gray-800">Drupal Bristol</h2> <span class="block p-6">
<h2 class="font-bold text-gray-800 group-hover:underline">Drupal Bristol</h2>
<p class="text-gray-600">accounts-partners</p> <p class="text-gray-600">accounts-partners</p>
<img src="/download.jpeg" alt="" class="shadow-2xl rounded mt-4"> <img src="/download.jpeg" alt="" class="shadow-2xl rounded mt-4">
</div> </span>
<div class="bg-white py-5 px-8 -mt-24 relative"> <span class="block bg-white py-5 px-8 -mt-24 relative">
<p>Europe (West 1)</p> <p>Europe (West 1)</p>
</div> </span>
</div> </span>
</a>
</article> </article>
</template> </template>

View file

@ -14,7 +14,7 @@ module.exports = {
}, },
variants: { variants: {
backgroundColor: [...defaultConfig.variants.backgroundColor, 'hocus', 'group-hocus'], backgroundColor: [...defaultConfig.variants.backgroundColor, 'hocus', 'group-hocus'],
textDecoration: [...defaultConfig.variants.textDecoration, 'hocus', 'group-hocus'] textDecoration: [...defaultConfig.variants.textDecoration, 'group-hover', 'hocus', 'group-hocus']
}, },
plugins: [ plugins: [
require('tailwindcss-interaction-variants')(), require('tailwindcss-interaction-variants')(),