Merge pull request #80 from tof-tof/adding-button-lift-on-hover

button lift and text shadow

components/HygieneKitsCard.js

@@ -25,9 +25,10 @@ function HygieneKitsCard() {
             {'96 Hygiene Kits for $153'}
           </a>
         </p>
-        <br />
-        <h3>{'Ship the kits to:'}</h3>
-        <p>{'1543 E Palmdale Blvd, Ste E, Palmdale, CA 93550'}</p>
+        <p className="shaded-text mt-3">
+          <h3>{'Ship the kits to:'}</h3>
+          <p>{'1543 E Palmdale Blvd, Ste E, Palmdale, CA 93550'}</p>
+        </p>
       </div>
     </div>
   );

components/LaptopForFamiliesCard.js

@@ -13,8 +13,7 @@ function LaptopForFamiliesCard() {
             "Mail us your used or new laptop. We'll set up the donated laptops in our public computer room for the families to use for free. Some of the donated laptops will go to the families who don't have home computers, or who don't have enough computers for all their children to use."
           }
         </p>
-        <p>
-          <br />
+        <p className="shaded-text">
           <h3>{'Ship the laptops to:'}</h3>
           <p>{'1543 E Palmdale Blvd, Ste E, Palmdale, CA 93550'}</p>
         </p>

pages/_app.js

@@ -1,4 +1,5 @@
-import 'tailwindcss/tailwind.css';
+// import 'tailwindcss/tailwind.css';
+import '../styles/global.css';
 import PropTypes from 'prop-types';
 import React from 'react';
 

styles/global.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn {
+    @apply tracking-wider shadow-2xl transform transition hover:-translate-y-0.5;  
+  }
+
+  .shaded-text{
+    @apply bg-black bg-opacity-10 py-2 rounded-lg;
+  }
+
+}

tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     content: [
       './pages/**/*.{js,ts,jsx,tsx}',
       './components/**/*.{js,ts,jsx,tsx}',
+      './styles/**/*.{scss,css}',
     ],
     options: {
       safelist: [/data-theme$/],