├── _config.yml
├── README.md
├── templates
    ├── template005.html
    ├── template001.html
    ├── template009.html
    ├── template008.html
    ├── template007.html
    ├── template003.html
    ├── template002.html
    ├── template004.html
    └── template006.html
├── LICENSE
└── index.html


/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # tailwind-template
2 | 
3 | An open-source collection of marketing site templates built on top of Tailwind
4 | CSS framework.
5 | 
6 | These templates just use the default Tailwind theme, no additional CSS.
7 | 
8 | These templates are free. You can use them any way you see fit.
9 | 


--------------------------------------------------------------------------------
/templates/template005.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-white py-8">
 2 |     <div class="w-5/6 max-w-lg ml-auto mr-auto mt-8 mb-8">
 3 |         <div class="flex flex-col md:flex-row items-center justify-center">
 4 |                 <p class="text-xl leading-normal mr-6 mb-8 md:mb-0 text-center md:text-left">This could be a call to action.</p>
 5 |                 <button class="bg-blue-500 hover:bg-blue-600 text-xl leading-none text-white font-semibold h-10 px-6 rounded-full whitespace-no-wrap">
 6 |                     Get started
 7 |                 </button>
 8 |         </div>
 9 |     </div>
10 | </section>
11 | 


--------------------------------------------------------------------------------
/templates/template001.html:
--------------------------------------------------------------------------------
 1 | <header class="absolute top-0 left-0 w-full py-4">
 2 |     <div class="flex items-center justify-between px-8">
 3 |         <span class="text-2xl tracking-tighter font-semibold">
 4 |             AppLogo
 5 |         </span>
 6 |         <div class="">
 7 |             <div class="flex items-center">
 8 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline ml-8" href="#">Link</a>
 9 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline ml-8" href="#">Link</a>
10 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline ml-8" href="#">Link</a>
11 |             </div>
12 |         </div>
13 |     </div>
14 | </header>
15 | 


--------------------------------------------------------------------------------
/templates/template009.html:
--------------------------------------------------------------------------------
 1 | <footer class="bg-gray-100 py-8">
 2 |     <div class="flex flex-col-reverse md:flex-row md:items-center md:justify-between px-8">
 3 |         <small class="block text-sm text-gray-500">
 4 |             &copy; CompanyName
 5 |         </small>
 6 |         <div class="mb-4 md:mb-0">
 7 |             <div class="flex flex-col md:flex-row md:items-center">
 8 |                 <a class="text-xl md:text-base leading-normal text-gray-700 hover:text-gray-900 no-underline mb-4 md:mb-0 md:ml-8" href="#">Link</a>
 9 |                 <a class="text-xl md:text-base leading-normal text-gray-700 hover:text-gray-900 no-underline mb-4 md:mb-0 md:ml-8" href="#">Another link</a>
10 |                 <a class="text-xl md:text-base leading-normal text-gray-700 hover:text-gray-900 no-underline mb-4 md:mb-0 md:ml-8" href="#">Link to something</a>
11 |             </div>
12 |         </div>
13 |     </div>
14 | </footer>
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Colm Tuite
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/templates/template008.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-gray-100 py-8">
 2 |     <div class="w-5/6 max-w-xl ml-auto mr-auto my-8">
 3 |         <div class="flex md:items-center flex-col md:flex-row md:justify-between">
 4 |             <div class="mb-8 md:mb-0 md:pr-4">
 5 |                 <h3 class="text-4xl font-normal tracking-tighter leading-none mb-3">This is a medium heading</h3>
 6 |                 <h4 class="text-3xl text-gray-700 font-normal leading-tight">This might be used for a call to action.</h4>
 7 |             </div>
 8 |             <div class="md:pl-4">
 9 |                 <div class="flex items-center">
10 |                     <button class="bg-blue-500 hover:bg-blue-600 text-xl leading-none text-white font-semibold h-10 px-6 rounded-full whitespace-no-wrap mr-2">
11 |                         Get started
12 |                     </button>
13 |                     <button class="bg-transparent text-xl leading-none text-blue-500 font-semibold hover:text-blue-600 h-10 px-6 border border-blue-200 hover:border-blue-400 rounded-full whitespace-no-wrap ml-2">
14 |                         Learn more
15 |                     </button>
16 |                 </div>
17 |             </div>
18 |         </div>
19 |     </div>
20 | </section>
21 | 


--------------------------------------------------------------------------------
/templates/template007.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-gray-100 py-8">
 2 |     <div class="w-5/6 max-w-2xl ml-auto mr-auto mt-8">
 3 |         <div class="flex flex-wrap -mx-6 -my-6">
 4 |             <div class="w-full lg:w-1/3 px-6 py-6">
 5 |                 <a class="no-underline" href="#">
 6 |                     <div class="bg-pink-600 rounded shadow-lg overflow-hidden p-8">
 7 |                         <h5 class="text-2xl text-white mb-4">Small heading</h5>
 8 |                         <p class="text-lg text-white leading-tight">This card links to a deeper screen with more info on some topic.</p>
 9 |                     </div>
10 |                 </a>
11 |             </div>
12 |             <div class="w-full lg:w-1/3 px-6 py-6">
13 |                 <a class="no-underline" href="#">
14 |                     <div class="bg-red-400 rounded shadow-lg overflow-hidden p-8">
15 |                         <h5 class="text-2xl text-white mb-4">Small heading</h5>
16 |                         <p class="text-lg text-white leading-tight">This card links to a deeper screen with more info on some topic.</p>
17 |                     </div>
18 |                 </a>
19 |             </div>
20 |             <div class="w-full lg:w-1/3 px-6 py-6">
21 |                 <a class="no-underline" href="#">
22 |                     <div class="bg-purple-400 rounded shadow-lg overflow-hidden p-8">
23 |                         <h5 class="text-2xl text-white mb-4">Small heading</h5>
24 |                         <p class="text-lg text-white leading-tight">This card links to a deeper screen with more info on some topic.</p>
25 |                     </div>
26 |                 </a>
27 |             </div>
28 |         </div>
29 |     </div>
30 | </section>
31 | 


--------------------------------------------------------------------------------
/templates/template003.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-white py-8">
 2 |     <div class="w-5/6 max-w-lg ml-auto mr-auto mt-8 mb-8">
 3 |         <div class="flex flex-wrap -mx-6 -my-6">
 4 |             <div class="w-full sm:w-1/2 px-6 py-6">
 5 |                 <div class="mb-8">
 6 |                     <svg class="align-middle text-red-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
 7 |                 </div>
 8 |                 <h3 class="text-3xl sm:text-4xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
 9 |                 <p class="text-lg sm:text-xl leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely.</p>
10 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
11 |             </div>
12 |             <div class="w-full sm:w-1/2 px-6 py-6">
13 |                 <div class="mb-8">
14 |                     <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
15 |                 </div>
16 |                 <h3 class="text-3xl sm:text-4xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
17 |                 <p class="text-lg sm:text-xl leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely.</p>
18 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
19 |             </div>
20 |         </div>
21 |     </div>
22 | </section>
23 | 


--------------------------------------------------------------------------------
/templates/template002.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-blue-100 h-full py-8">
 2 |     <div class="w-5/6 max-w-lg ml-auto mr-auto h-full">
 3 |         <div class="flex items-center justify-center text-center h-full">
 4 |             <div>
 5 |                 <h1 class="text-4xl sm:text-5xl font-semibold leading-none tracking-tighter mb-4">This is an insanely big ass heading</h1>
 6 |                 <h2 class="text-2xl sm:text-3xl text-blue-800 opacity-75 font-normal leading-tight mb-8">This is a little ass heading to provide additional support.</h2>
 7 |                 <div class="flex flex-col sm:flex-row items-center justify-center sm:pt-3 mb-3 sm:mb-6">
 8 |                     <a class="flex items-center text-xl leading-none text-blue-500 hover:text-blue-600 no-underline mb-2 sm:mb-0 sm:mr-4" href="#">
 9 |                         <div class="mr-3">
10 |                             <svg class="align-middle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="3"/><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/></svg>
11 |                         </div>
12 |                         <span>
13 |                             Link to something
14 |                         </span>
15 |                     </a>
16 |                     <a class="flex items-center text-xl leading-none text-blue-500 hover:text-blue-600 no-underline mt-2 sm:mt-0 sm:ml-4" href="#">
17 |                         <div class="mr-3">
18 |                             <svg class="align-middle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="8 12 12 16 16 12"/><line x1="12" y1="8" x2="12" y2="16"/></svg>
19 |                         </div>
20 |                         <span>
21 |                             Link to something
22 |                         </span>
23 |                     </a>
24 |                 </div>
25 |                 <div class="flex flex-col sm:flex-row justify-center pt-8">
26 |                     <button class="bg-blue-500 hover:bg-blue-600 text-2xl leading-none text-white font-semibold h-12 px-8 rounded-full whitespace-no-wrap mb-2 sm:mb-0 sm:mr-2">
27 |                         Get started
28 |                     </button>
29 |                     <button class="bg-transparent text-2xl leading-none text-blue-500 font-semibold hover:text-blue-600 h-12 px-8 border border-blue-200 hover:border-blue-400 rounded-full whitespace-no-wrap mt-2 sm:mt-0 sm:ml-2">
30 |                         Learn more
31 |                     </button>
32 |                 </div>
33 |             </div>
34 |         </div>
35 |     </div>
36 | </section>
37 | 


--------------------------------------------------------------------------------
/templates/template004.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-gray-100 py-8">
 2 |     <div class="w-5/6 max-w-2xl ml-auto mr-auto mt-8 mb-8">
 3 |         <div class="flex flex-wrap -mx-6 -my-6">
 4 |             <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
 5 |                 <div class="mb-8">
 6 |                     <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
 7 |                 </div>
 8 |                 <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
 9 |                 <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
10 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
11 |             </div>
12 |             <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
13 |                 <div class="mb-8">
14 |                     <svg class="align-middle text-pink-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
15 |                 </div>
16 |                 <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
17 |                 <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
18 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
19 |             </div>
20 |             <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
21 |                 <div class="mb-8">
22 |                     <svg class="align-middle text-purple-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
23 |                 </div>
24 |                 <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
25 |                 <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
26 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
27 |             </div>
28 |             <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
29 |                 <div class="mb-8">
30 |                     <svg class="align-middle text-orange-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
31 |                 </div>
32 |                 <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
33 |                 <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
34 |                 <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
35 |             </div>
36 |         </div>
37 |     </div>
38 | </section>
39 | 


--------------------------------------------------------------------------------
/templates/template006.html:
--------------------------------------------------------------------------------
 1 | <section class="bg-white py-8">
 2 |     <div class="w-5/6 max-w-lg ml-auto mr-auto mt-8 mb-8">
 3 |         <div class="flex flex-col justify-center text-center pb-8">
 4 |             <h2 class="text-5xl font-semibold leading-none tracking-tighter mb-4">Flexible pricing for your inflexible needs</h2>
 5 |             <h3 class="text-3xl text-blue-800 opacity-75 font-normal leading-none mb-8">14-day free trial. No credit card required.</h3>
 6 |         </div>
 7 | 
 8 |         <div class="bg-white rounded shadow-lg overflow-hidden">
 9 |             <div class="flex flex-col-reverse md:flex-row">
10 |                 <div class="flex-1">
11 |                     <div class="bg-gray-100 p-8">
12 |                         <h5 class="text-xl font-semibold mb-8">What you get when you sign up:</h5>
13 |                         <ul>
14 |                             <li class="mb-4">
15 |                                 <div class="flex items-center">
16 |                                     <div class="mr-4">
17 |                                         <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
18 |                                     </div>
19 |                                     <p class="text-lg leading-normal">Unlimited everything</p>
20 |                                 </div>
21 |                             </li>
22 |                             <li class="mb-4">
23 |                                 <div class="flex items-center">
24 |                                     <div class="mr-4">
25 |                                         <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
26 |                                     </div>
27 |                                     <p class="text-lg leading-normal">Unlimited limitlessness</p>
28 |                                 </div>
29 |                             </li>
30 |                             <li class="mb-4">
31 |                                 <div class="flex items-center">
32 |                                     <div class="mr-4">
33 |                                         <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
34 |                                     </div>
35 |                                     <p class="text-lg leading-normal">Single sign-on</p>
36 |                                 </div>
37 |                             </li>
38 |                             <li class="">
39 |                                 <div class="flex items-center">
40 |                                     <div class="mr-4">
41 |                                         <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
42 |                                     </div>
43 |                                     <p class="text-lg leading-normal">Code export HAHAHA</p>
44 |                                 </div>
45 |                             </li>
46 |                         </ul>
47 |                     </div>
48 |                 </div>
49 |                 <div class="flex-1">
50 |                     <div class="flex flex-col items-center p-8 h-full">
51 |                         <div class="flex flex-1 mb-8">
52 |                             <div class="flex self-start items-center">
53 |                                 <span class="text-3xl text-gray-700 leading-none mr-2">$</span>
54 |                                 <span class="text-5xl font-semibold tracking-tighter leading-none text-teal-500 mr-3" style="font-size: 5.6rem;">499</span>
55 |                                 <span class="text-xl text-gray-700 leading-none">/ month</span>
56 |                             </div>
57 |                         </div>
58 |                         <button class="bg-teal-500 hover:bg-teal-500-dark text-xl leading-none text-white font-semibold h-10 px-6 rounded-full whitespace-no-wrap w-full">
59 |                             Take my money
60 |                         </button>
61 |                     </div>
62 |                 </div>
63 | 
64 |             </div>
65 |         </div>
66 |     </div>
67 | 
68 |     <div class="w-5/6 max-w-md ml-auto mr-auto pt-8 mt-8 mb-8">
69 |         <div class="flex flex-wrap -mx-6 -my-6">
70 |             <div class="w-full sm:w-1/2 px-6 py-6">
71 |                 <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
72 |                 <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
73 |             </div>
74 |             <div class="w-full sm:w-1/2 px-6 py-6">
75 |                 <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
76 |                 <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
77 |             </div>
78 |             <div class="w-full sm:w-1/2 px-6 py-6">
79 |                 <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
80 |                 <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
81 |             </div>
82 |             <div class="w-full sm:w-1/2 px-6 py-6">
83 |                 <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
84 |                 <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
85 |             </div>
86 |         </div>
87 |     </div>
88 | </section>
89 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html class="overflow-y-scroll h-full" lang="en">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta name="viewport" content="width=device-width,initial-scale=1">
  6 |         <title>Tailwind Website</title>
  7 |         <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  8 |         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
  9 | 
 10 |         <style media="screen">
 11 |             .font-sans {
 12 |                 font-family: 'Source Sans Pro', apple-system, BlinkMacSystemFont, 'Helvetica Neue', arial, sans-serif;
 13 |             }
 14 |         </style>
 15 |     </head>
 16 |     <body class="font-sans text-gray-900 h-full">
 17 |         <header class="absolute top-0 left-0 w-full py-4">
 18 |             <div class="flex items-center justify-between px-8">
 19 |                 <span class="text-2xl tracking-tighter font-semibold">
 20 |                     AppLogo
 21 |                 </span>
 22 |                 <div class="">
 23 |                     <div class="flex items-center">
 24 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline ml-8" href="#">Link</a>
 25 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline ml-8" href="#">Link</a>
 26 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline ml-8" href="#">Link</a>
 27 |                     </div>
 28 |                 </div>
 29 |             </div>
 30 |         </header>
 31 |         <section class="bg-blue-100 h-full py-8">
 32 |             <div class="w-5/6 max-w-lg ml-auto mr-auto h-full">
 33 |                 <div class="flex items-center justify-center text-center h-full">
 34 |                     <div>
 35 |                         <h1 class="text-4xl sm:text-5xl font-semibold leading-none tracking-tighter mb-4">This is an insanely big ass heading</h1>
 36 |                         <h2 class="text-2xl sm:text-3xl text-blue-800 opacity-75 font-normal leading-tight mb-8">This is a little ass heading to provide additional support.</h2>
 37 |                         <div class="flex flex-col sm:flex-row items-center justify-center sm:pt-3 mb-3 sm:mb-6">
 38 |                             <a class="flex items-center text-xl leading-none text-blue-500 hover:text-blue-600 no-underline mb-2 sm:mb-0 sm:mr-4" href="#">
 39 |                                 <div class="mr-3">
 40 |                                     <svg class="align-middle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="3"/><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/></svg>
 41 |                                 </div>
 42 |                                 <span>
 43 |                                     Link to something
 44 |                                 </span>
 45 |                             </a>
 46 |                             <a class="flex items-center text-xl leading-none text-blue-500 hover:text-blue-600 no-underline mt-2 sm:mt-0 sm:ml-4" href="#">
 47 |                                 <div class="mr-3">
 48 |                                     <svg class="align-middle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="8 12 12 16 16 12"/><line x1="12" y1="8" x2="12" y2="16"/></svg>
 49 |                                 </div>
 50 |                                 <span>
 51 |                                     Link to something
 52 |                                 </span>
 53 |                             </a>
 54 |                         </div>
 55 |                         <div class="flex flex-col sm:flex-row justify-center pt-8">
 56 |                             <button class="bg-blue-500 hover:bg-blue-600 text-2xl leading-none text-white font-semibold h-12 px-8 rounded-full whitespace-no-wrap mb-2 sm:mb-0 sm:mr-2">
 57 |                                 Get started
 58 |                             </button>
 59 |                             <button class="bg-transparent text-2xl leading-none text-blue-500 font-semibold hover:text-blue-600 h-12 px-8 border border-blue-200 hover:border-blue-400 rounded-full whitespace-no-wrap mt-2 sm:mt-0 sm:ml-2">
 60 |                                 Learn more
 61 |                             </button>
 62 |                         </div>
 63 |                     </div>
 64 |                 </div>
 65 |             </div>
 66 |         </section>
 67 | 
 68 |         <section class="bg-white py-8">
 69 |             <div class="w-5/6 max-w-lg ml-auto mr-auto mt-8 mb-8">
 70 |                 <div class="flex flex-wrap -mx-6 -my-6">
 71 |                     <div class="w-full sm:w-1/2 px-6 py-6">
 72 |                         <div class="mb-8">
 73 |                             <svg class="align-middle text-red-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
 74 |                         </div>
 75 |                         <h3 class="text-3xl sm:text-4xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
 76 |                         <p class="text-lg sm:text-xl leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely.</p>
 77 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
 78 |                     </div>
 79 |                     <div class="w-full sm:w-1/2 px-6 py-6">
 80 |                         <div class="mb-8">
 81 |                             <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
 82 |                         </div>
 83 |                         <h3 class="text-3xl sm:text-4xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
 84 |                         <p class="text-lg sm:text-xl leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely.</p>
 85 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
 86 |                     </div>
 87 |                 </div>
 88 |             </div>
 89 |         </section>
 90 | 
 91 |         <section class="bg-gray-100 py-8">
 92 |             <div class="w-5/6 max-w-2xl ml-auto mr-auto mt-8 mb-8">
 93 |                 <div class="flex flex-wrap -mx-6 -my-6">
 94 |                     <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
 95 |                         <div class="mb-8">
 96 |                             <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
 97 |                         </div>
 98 |                         <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
 99 |                         <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
100 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
101 |                     </div>
102 |                     <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
103 |                         <div class="mb-8">
104 |                             <svg class="align-middle text-pink-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
105 |                         </div>
106 |                         <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
107 |                         <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
108 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
109 |                     </div>
110 |                     <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
111 |                         <div class="mb-8">
112 |                             <svg class="align-middle text-purple-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
113 |                         </div>
114 |                         <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
115 |                         <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
116 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
117 |                     </div>
118 |                     <div class="w-full sm:w-1/2 lg:w-1/4 px-6 py-6">
119 |                         <div class="mb-8">
120 |                             <svg class="align-middle text-orange-500" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="14.31" y1="8" x2="20.05" y2="17.94"/><line x1="9.69" y1="8" x2="21.17" y2="8"/><line x1="7.38" y1="12" x2="13.12" y2="2.06"/><line x1="9.69" y1="16" x2="3.95" y2="6.06"/><line x1="14.31" y1="16" x2="2.83" y2="16"/><line x1="16.62" y1="12" x2="10.88" y2="21.94"/></svg>
121 |                         </div>
122 |                         <h3 class="text-3xl font-semibold tracking-tighter leading-none mb-3">This is a small heading</h3>
123 |                         <p class="text-lg leading-normal text-gray-700 mb-8">If you don't plan to use the shadow utilities in your project, you can disable them entirely by setting the option.</p>
124 |                         <a class="text-lg leading-normal text-blue-500 hover:text-blue-600 no-underline" href="#">Link to something</a>
125 |                     </div>
126 |                 </div>
127 |             </div>
128 |         </section>
129 | 
130 |         <section class="bg-white py-8">
131 |             <div class="w-5/6 max-w-lg ml-auto mr-auto mt-8 mb-8">
132 |                 <div class="flex flex-col md:flex-row items-center justify-center">
133 |                         <p class="text-xl leading-normal mr-6 mb-8 md:mb-0 text-center md:text-left">This could be a call to action.</p>
134 |                         <button class="bg-blue-500 hover:bg-blue-600 text-xl leading-none text-white font-semibold h-10 px-6 rounded-full whitespace-no-wrap">
135 |                             Get started
136 |                         </button>
137 |                 </div>
138 |             </div>
139 |         </section>
140 | 
141 |         <div class="flex justify-center">
142 |             <div class="bg-gray-400 h-1 w-16 rounded"></div>
143 |         </div>
144 | 
145 |         <section class="bg-white py-8">
146 |             <div class="w-5/6 max-w-lg ml-auto mr-auto mt-8 mb-8">
147 |                 <div class="flex flex-col justify-center text-center pb-8">
148 |                     <h2 class="text-5xl font-semibold leading-none tracking-tighter mb-4">Flexible pricing for your inflexible needs</h2>
149 |                     <h3 class="text-3xl text-blue-800 opacity-75 font-normal leading-none mb-8">14-day free trial. No credit card required.</h3>
150 |                 </div>
151 | 
152 |                 <div class="bg-white rounded shadow-lg overflow-hidden">
153 |                     <div class="flex flex-col-reverse md:flex-row">
154 |                         <div class="flex-1">
155 |                             <div class="bg-gray-100 p-8">
156 |                                 <h5 class="text-xl font-semibold mb-8">What you get when you sign up:</h5>
157 |                                 <ul>
158 |                                     <li class="mb-4">
159 |                                         <div class="flex items-center">
160 |                                             <div class="mr-4">
161 |                                                 <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
162 |                                             </div>
163 |                                             <p class="text-lg leading-normal">Unlimited everything</p>
164 |                                         </div>
165 |                                     </li>
166 |                                     <li class="mb-4">
167 |                                         <div class="flex items-center">
168 |                                             <div class="mr-4">
169 |                                                 <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
170 |                                             </div>
171 |                                             <p class="text-lg leading-normal">Unlimited limitlessness</p>
172 |                                         </div>
173 |                                     </li>
174 |                                     <li class="mb-4">
175 |                                         <div class="flex items-center">
176 |                                             <div class="mr-4">
177 |                                                 <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
178 |                                             </div>
179 |                                             <p class="text-lg leading-normal">Single sign-on</p>
180 |                                         </div>
181 |                                     </li>
182 |                                     <li class="">
183 |                                         <div class="flex items-center">
184 |                                             <div class="mr-4">
185 |                                                 <svg class="align-middle text-teal-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
186 |                                             </div>
187 |                                             <p class="text-lg leading-normal">Code export HAHAHA</p>
188 |                                         </div>
189 |                                     </li>
190 |                                 </ul>
191 |                             </div>
192 |                         </div>
193 |                         <div class="flex-1">
194 |                             <div class="flex flex-col items-center p-8 h-full">
195 |                                 <div class="flex flex-1 mb-8">
196 |                                     <div class="flex self-start items-center">
197 |                                         <span class="text-3xl text-gray-700 leading-none mr-2">$</span>
198 |                                         <span class="text-5xl font-semibold tracking-tighter leading-none text-teal-500 mr-3" style="font-size: 5.6rem;">499</span>
199 |                                         <span class="text-xl text-gray-700 leading-none">/ month</span>
200 |                                     </div>
201 |                                 </div>
202 |                                 <button class="bg-teal-500 hover:bg-teal-500-dark text-xl leading-none text-white font-semibold h-10 px-6 rounded-full whitespace-no-wrap w-full">
203 |                                     Take my money
204 |                                 </button>
205 |                             </div>
206 |                         </div>
207 | 
208 |                     </div>
209 |                 </div>
210 |             </div>
211 | 
212 |             <div class="w-5/6 max-w-md ml-auto mr-auto pt-8 mt-8 mb-8">
213 |                 <div class="flex flex-wrap -mx-6 -my-6">
214 |                     <div class="w-full sm:w-1/2 px-6 py-6">
215 |                         <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
216 |                         <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
217 |                     </div>
218 |                     <div class="w-full sm:w-1/2 px-6 py-6">
219 |                         <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
220 |                         <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
221 |                     </div>
222 |                     <div class="w-full sm:w-1/2 px-6 py-6">
223 |                         <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
224 |                         <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
225 |                     </div>
226 |                     <div class="w-full sm:w-1/2 px-6 py-6">
227 |                         <h3 class="text-xl font-semibold leading-tight mb-3">Can I use these templates for free?</h3>
228 |                         <p class="text-lg leading-normal text-gray-700 mb-8">Yes! These templates are open-source so you can copy, paste and edit them any way you see fit.</p>
229 |                     </div>
230 |                 </div>
231 |             </div>
232 |         </section>
233 | 
234 |         <section class="bg-gray-100 py-8">
235 |             <div class="w-5/6 max-w-2xl ml-auto mr-auto mt-8">
236 |                 <div class="flex flex-wrap -mx-6 -my-6">
237 |                     <div class="w-full lg:w-1/3 px-6 py-6">
238 |                         <a class="no-underline" href="#">
239 |                             <div class="bg-pink-600 rounded shadow-lg overflow-hidden p-8">
240 |                                 <h5 class="text-2xl text-white mb-4">Small heading</h5>
241 |                                 <p class="text-lg text-white leading-tight">This card links to a deeper screen with more info on some topic.</p>
242 |                             </div>
243 |                         </a>
244 |                     </div>
245 |                     <div class="w-full lg:w-1/3 px-6 py-6">
246 |                         <a class="no-underline" href="#">
247 |                             <div class="bg-red-400 rounded shadow-lg overflow-hidden p-8">
248 |                                 <h5 class="text-2xl text-white mb-4">Small heading</h5>
249 |                                 <p class="text-lg text-white leading-tight">This card links to a deeper screen with more info on some topic.</p>
250 |                             </div>
251 |                         </a>
252 |                     </div>
253 |                     <div class="w-full lg:w-1/3 px-6 py-6">
254 |                         <a class="no-underline" href="#">
255 |                             <div class="bg-purple-400 rounded shadow-lg overflow-hidden p-8">
256 |                                 <h5 class="text-2xl text-white mb-4">Small heading</h5>
257 |                                 <p class="text-lg text-white leading-tight">This card links to a deeper screen with more info on some topic.</p>
258 |                             </div>
259 |                         </a>
260 |                     </div>
261 |                 </div>
262 |             </div>
263 |         </section>
264 | 
265 |         <section class="bg-gray-100 py-8">
266 |             <div class="w-5/6 max-w-xl ml-auto mr-auto my-8">
267 |                 <div class="flex md:items-center flex-col md:flex-row md:justify-between">
268 |                     <div class="mb-8 md:mb-0 md:pr-4">
269 |                         <h3 class="text-4xl font-normal tracking-tighter leading-none mb-3">This is a medium heading</h3>
270 |                         <h4 class="text-3xl text-gray-700 font-normal leading-tight">This might be used for a call to action.</h4>
271 |                     </div>
272 |                     <div class="md:pl-4">
273 |                         <div class="flex items-center">
274 |                             <button class="bg-blue-500 hover:bg-blue-600 text-xl leading-none text-white font-semibold h-10 px-6 rounded-full whitespace-no-wrap mr-2">
275 |                                 Get started
276 |                             </button>
277 |                             <button class="bg-transparent text-xl leading-none text-blue-500 font-semibold hover:text-blue-600 h-10 px-6 border border-blue-200 hover:border-blue-400 rounded-full whitespace-no-wrap ml-2">
278 |                                 Learn more
279 |                             </button>
280 |                         </div>
281 |                     </div>
282 |                 </div>
283 |             </div>
284 |         </section>
285 | 
286 |         <footer class="bg-gray-100 py-8">
287 |             <div class="flex flex-col-reverse md:flex-row md:items-center md:justify-between px-8">
288 |                 <small class="block text-sm text-gray-500">
289 |                     &copy; CompanyName
290 |                 </small>
291 |                 <div class="mb-4 md:mb-0">
292 |                     <div class="flex flex-col md:flex-row md:items-center">
293 |                         <a class="text-xl md:text-base leading-normal text-gray-700 hover:text-gray-900 no-underline mb-4 md:mb-0 md:ml-8" href="#">Link</a>
294 |                         <a class="text-xl md:text-base leading-normal text-gray-700 hover:text-gray-900 no-underline mb-4 md:mb-0 md:ml-8" href="#">Another link</a>
295 |                         <a class="text-xl md:text-base leading-normal text-gray-700 hover:text-gray-900 no-underline mb-4 md:mb-0 md:ml-8" href="#">Link to something</a>
296 |                     </div>
297 |                 </div>
298 |             </div>
299 |         </footer>
300 |     </body>
301 | </html>
302 | 


--------------------------------------------------------------------------------