setup defaults for tailwind config and sample html page

tecmie · Apr 8, 2024 · dba9c55 · dba9c55
1 parent 62396e1
commit dba9c55
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -2,8 +2,9 @@
   "name": "parcel-tailwind-starter",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
   "scripts": {
+    "dev": "parcel src/index.html",
+    "build": "parcel build src/index.html",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

diff --git a/src/index.html b/src/index.html
@@ -6,8 +6,28 @@
   <link href="./index.css" type="text/css" rel="stylesheet">
 </head>
 <body>
-  <h1 class="text-3xl font-bold underline">
-    Hello world!
-  </h1>
+  <div class="bg-white py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="grid grid-cols-1 items-center gap-x-8 gap-y-16 lg:grid-cols-2">
+        <div class="mx-auto w-full max-w-xl lg:mx-0">
+          <h2 class="text-3xl font-bold tracking-tight text-gray-900">Trusted by the most innovative teams</h2>
+          <p class="mt-6 text-lg leading-8 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et, egestas tempus tellus etiam sed. Quam a scelerisque amet ullamcorper eu enim et fermentum, augue.</p>
+          <div class="mt-8 flex items-center gap-x-6">
+            <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create account</a>
+            <a href="#" class="text-sm font-semibold text-gray-900">Contact us <span aria-hidden="true">&rarr;</span></a>
+          </div>
+        </div>
+        <div class="mx-auto grid w-full max-w-xl grid-cols-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
+          <img class="max-h-12 w-full object-contain object-left" src="https://tailwindui.com/img/logos/tuple-logo-gray-900.svg" alt="Tuple" width="105" height="48">
+          <img class="max-h-12 w-full object-contain object-left" src="https://tailwindui.com/img/logos/reform-logo-gray-900.svg" alt="Reform" width="104" height="48">
+          <img class="max-h-12 w-full object-contain object-left" src="https://tailwindui.com/img/logos/savvycal-logo-gray-900.svg" alt="SavvyCal" width="140" height="48">
+          <img class="max-h-12 w-full object-contain object-left" src="https://tailwindui.com/img/logos/laravel-logo-gray-900.svg" alt="Laravel" width="136" height="48">
+          <img class="max-h-12 w-full object-contain object-left" src="https://tailwindui.com/img/logos/transistor-logo-gray-900.svg" alt="Transistor" width="158" height="48">
+          <img class="max-h-12 w-full object-contain object-left" src="https://tailwindui.com/img/logos/statamic-logo-gray-900.svg" alt="Statamic" width="147" height="48">
+        </div>
+      </div>
+    </div>
+  </div>
+
 </body>
 </html>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,16 +7,6 @@ module.exports = {
     require("@tailwindcss/aspect-ratio"),
   ],
   theme: {
-      fontSize: {
-        sm: '1.45rem',
-        base: '1.852rem',
-        xl: '2rem',
-        '2xl': '3.3rem',
-        '3xl': '4.3rem',
-        '4xl': '5.415rem',
-        '5xl': '7.52rem',
-        '6xl': '9.52rem',
-      },
     extend: {
       colors: {},
     },