Merge pull request #94 from hugekontrast/master

Added get-started-button fixes #65

tailwind_components/buttons/collection.js

@@ -12,6 +12,7 @@ import searchButton from "./search_test_icon_button1.jsx";
 import singleButton from "./single_button";
 import socialButton from "./solid_social_button1.jsx";
 import reportButton from "./report_button";
+import getStartedButton from "./get_started_button.jsx";
 
 const buttonCollections = [
   {componentName: "button2", component: test1},
@@ -27,6 +28,7 @@ const buttonCollections = [
   {componentName: "Single Button", component: singleButton},
   {componentName: "Social Button", component: socialButton},
   {componentName: "Report Button", component: reportButton},
+  {componentName: "Get Started Button", component: getStartedButton},
 ];
 
 export default buttonCollections;

tailwind_components/buttons/get_started_button.jsx

@@ -0,0 +1,32 @@
+import {stripIndent} from "react-codepen-prefill-embed";
+
+const getStartedButton = stripIndent`
+<div class='bg-gray-50 flex'>
+  <div class="m-auto  max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8">
+    <!-- button component starts from here -->
+  <button
+  class="bg-left-top font-medium text-base border-transparent bg-repeat px-6 py-4 rounded-full flex flex-row items-center gap-4 text-white shadow overflow-hidden" style="background-image: repeating-linear-gradient(-45deg, 
+      #8b6ce8 10px 40px,
+      #b2f7ef 40px 100px,
+      #eff7f6 100px 150px,
+      #f7d6e0 150px 200px,
+      #df8ad4 200px 250px
+  )">
+  <a
+    href='#'
+    class="text-black"
+    >
+    Get Started
+  </a>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
+</svg>
+</button>
+    
+<!--     button component -->
+    
+</div>
+</div>  
+  `;
+
+export default getStartedButton