├── LICENSE
├── README.md
└── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Tailwind Toolbox
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Tailwind Toolbox](https://www.tailwindtoolbox.com/) - [Nordic Store](https://www.tailwindtoolbox.com/templates/nordic-store)
 2 | 
 3 | [Nordic Store](https://www.tailwindtoolbox.com/templates/nordic-store) is an open source, nordic inspired e-commerce product listing template for [Tailwind CSS](https://tailwindcss.com/) created by [Tailwind Toolbox](https://www.tailwindtoolbox.com/).
 4 | 
 5 | 
 6 |  This template is inspired by the stunning nordic minamalist design - in particular:
 7 | * [Savoy Theme](http://savoy.nordicmade.com) created by https://nordicmade.com/
 8 | * https://www.metricdesign.no
 9 | 
10 | ![Nordic Store](https://www.tailwindtoolbox.com/templates/nordic-store.png)
11 | 
12 | 
13 | ## Getting Started
14 | 
15 | Choose one of the following options to get started:
16 | * [Download the latest release](https://github.com/tailwindtoolbox/Nordic-Store/archive/master.zip)
17 | * Clone the repo: `git clone https://github.com/tailwindtoolbox/Nordic-Store.git`
18 | * Fork the repo
19 | 
20 | ## Using the Template
21 | 
22 | The template is just a HTML file using a full CDN hosted Tailwind CSS file.
23 | 
24 | To get the best out of Tailwind CSS, you need to really start customising it.
25 | Take a look at our [setup guide](https://www.tailwindtoolbox.com/setup) to start tweaking!
26 | 
27 | ## Sites created using this template
28 | 
29 | * Raise a PR to add your site to the list! :)
30 | 
31 | 
32 | ## Bugs and Issues
33 | 
34 | Have a bug or an issue with this template? [Open a new issue](https://github.com/tailwindtoolbox/Nordic-Store/issues/new) here on GitHub.
35 | 
36 | ## Creator
37 | 
38 | [Tailwind Toolbox](https://www.tailwindtoolbox.com/) was created by and is maintained by **[Amrit Nagi](https://amritnagi.info/)**, Co-owner of [Astrava.Solutions](https://astrava.solutions).
39 | 
40 | * https://twitter.com/tailwindtoolbox
41 | * https://twitter.com/amritnagi
42 | * https://github.com/tailwindtoolbox
43 | 
44 | Tailwind Toolbox is based on the [Tailwind CSS](https://www.tailwindcss.com/) framework created by [Adam Wathan](https://twitter.com/adamwathan), [Jonathan Reinink](https://twitter.com/reinink), [David Hemphill](https://twitter.com/davidhemphill) and [Steve Schoger](https://twitter.com/steveschoger)
45 | 
46 | 
47 | 
48 | 
49 | ## Copyright and License
50 | 
51 | Copyright 2018-2019 Astrava.Solutions Ltd. Code released under the MIT license.
52 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <title>Tailwind Starter Template - Nordic Shop: Tailwind Toolbox</title>
  9 |     <meta name="description" content="Free open source Tailwind CSS Store template">
 10 |     <meta name="keywords" content="tailwind,tailwindcss,tailwind css,css,starter template,free template,store template, shop layout, minimal, monochrome, minimalistic, theme, nordic">
 11 |     
 12 |     <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"/>
 13 | 	
 14 |     <link href="https://fonts.googleapis.com/css?family=Work+Sans:200,400&display=swap" rel="stylesheet">
 15 | 
 16 |     <style>
 17 |         .work-sans {
 18 |             font-family: 'Work Sans', sans-serif;
 19 |         }
 20 |                 
 21 |         #menu-toggle:checked + #menu {
 22 |             display: block;
 23 |         }
 24 |         
 25 |         .hover\:grow {
 26 |             transition: all 0.3s;
 27 |             transform: scale(1);
 28 |         }
 29 |         
 30 |         .hover\:grow:hover {
 31 |             transform: scale(1.02);
 32 |         }
 33 |         
 34 |         .carousel-open:checked + .carousel-item {
 35 |             position: static;
 36 |             opacity: 100;
 37 |         }
 38 |         
 39 |         .carousel-item {
 40 |             -webkit-transition: opacity 0.6s ease-out;
 41 |             transition: opacity 0.6s ease-out;
 42 |         }
 43 |         
 44 |         #carousel-1:checked ~ .control-1,
 45 |         #carousel-2:checked ~ .control-2,
 46 |         #carousel-3:checked ~ .control-3 {
 47 |             display: block;
 48 |         }
 49 |         
 50 |         .carousel-indicators {
 51 |             list-style: none;
 52 |             margin: 0;
 53 |             padding: 0;
 54 |             position: absolute;
 55 |             bottom: 2%;
 56 |             left: 0;
 57 |             right: 0;
 58 |             text-align: center;
 59 |             z-index: 10;
 60 |         }
 61 |         
 62 |         #carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
 63 |         #carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
 64 |         #carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
 65 |             color: #000;
 66 |             /*Set to match the Tailwind colour you want the active one to be */
 67 |         }
 68 |     </style>
 69 | 
 70 | </head>
 71 | 
 72 | <body class="bg-white text-gray-600 work-sans leading-normal text-base tracking-normal">
 73 | 
 74 |     <!--Nav-->
 75 |     <nav id="header" class="w-full z-30 top-0 py-1">
 76 |         <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-6 py-3">
 77 | 
 78 |             <label for="menu-toggle" class="cursor-pointer md:hidden block">
 79 |                 <svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
 80 |                     <title>menu</title>
 81 |                     <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
 82 |                 </svg>
 83 |             </label>
 84 |             <input class="hidden" type="checkbox" id="menu-toggle" />
 85 | 
 86 |             <div class="hidden md:flex md:items-center md:w-auto w-full order-3 md:order-1" id="menu">
 87 |                 <nav>
 88 |                     <ul class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0">
 89 |                         <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="#">Shop</a></li>
 90 |                         <li><a class="inline-block no-underline hover:text-black hover:underline py-2 px-4" href="#">About</a></li>
 91 |                     </ul>
 92 |                 </nav>
 93 |             </div>
 94 | 
 95 |             <div class="order-1 md:order-2">
 96 |                 <a class="flex items-center tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
 97 |                     <svg class="fill-current text-gray-800 mr-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 98 |                         <path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
 99 |                     </svg>
100 |                     NORDICS
101 |                 </a>
102 |             </div>
103 | 
104 |             <div class="order-2 md:order-3 flex items-center" id="nav-content">
105 | 
106 |                 <a class="inline-block no-underline hover:text-black" href="#">
107 |                     <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
108 |                         <circle fill="none" cx="12" cy="7" r="3" />
109 |                         <path d="M12 2C9.243 2 7 4.243 7 7s2.243 5 5 5 5-2.243 5-5S14.757 2 12 2zM12 10c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3S13.654 10 12 10zM21 21v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h2v-1c0-2.757 2.243-5 5-5h4c2.757 0 5 2.243 5 5v1H21z" />
110 |                     </svg>
111 |                 </a>
112 | 
113 |                 <a class="pl-3 inline-block no-underline hover:text-black" href="#">
114 |                     <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
115 |                         <path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" />
116 |                         <circle cx="10.5" cy="18.5" r="1.5" />
117 |                         <circle cx="17.5" cy="18.5" r="1.5" />
118 |                     </svg>
119 |                 </a>
120 | 
121 |             </div>
122 |         </div>
123 |     </nav>
124 | 
125 |     <div class="carousel relative container mx-auto" style="max-width:1600px;">
126 |         <div class="carousel-inner relative overflow-hidden w-full">
127 |             <!--Slide 1-->
128 |             <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
129 |             <div class="carousel-item absolute opacity-0" style="height:50vh;">
130 |                 <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');">
131 | 
132 |                     <div class="container mx-auto">
133 |                         <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide">
134 |                             <p class="text-black text-2xl my-4">Stripy Zig Zag Jigsaw Pillow and Duvet Set</p>
135 |                             <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a>
136 |                         </div>
137 |                     </div>
138 | 
139 |                 </div>
140 |             </div>
141 |             <label for="carousel-3" class="prev control-1 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label>
142 |             <label for="carousel-2" class="next control-1 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900 leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label>
143 | 
144 |             <!--Slide 2-->
145 |             <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
146 |             <div class="carousel-item absolute opacity-0 bg-cover bg-right" style="height:50vh;">
147 |                 <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-right" style="background-image: url('https://images.unsplash.com/photo-1533090161767-e6ffed986c88?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjM0MTM2fQ&auto=format&fit=crop&w=1600&q=80');">
148 | 
149 |                     <div class="container mx-auto">
150 |                         <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide">
151 |                             <p class="text-black text-2xl my-4">Real Bamboo Wall Clock</p>
152 |                             <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a>
153 |                         </div>
154 |                     </div>
155 | 
156 |                 </div>
157 |             </div>
158 |             <label for="carousel-1" class="prev control-2 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900  leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label>
159 |             <label for="carousel-3" class="next control-2 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900  leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label>
160 | 
161 |             <!--Slide 3-->
162 |             <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
163 |             <div class="carousel-item absolute opacity-0" style="height:50vh;">
164 |                 <div class="block h-full w-full mx-auto flex pt-6 md:pt-0 md:items-center bg-cover bg-bottom" style="background-image: url('https://images.unsplash.com/photo-1519327232521-1ea2c736d34d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');">
165 | 
166 |                     <div class="container mx-auto">
167 |                         <div class="flex flex-col w-full lg:w-1/2 md:ml-16 items-center md:items-start px-6 tracking-wide">
168 |                             <p class="text-black text-2xl my-4">Brown and blue hardbound book</p>
169 |                             <a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">view product</a>
170 |                         </div>
171 |                     </div>
172 | 
173 |                 </div>
174 |             </div>
175 |             <label for="carousel-2" class="prev control-3 w-10 h-10 ml-2 md:ml-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900  leading-tight text-center z-10 inset-y-0 left-0 my-auto">‹</label>
176 |             <label for="carousel-1" class="next control-3 w-10 h-10 mr-2 md:mr-10 absolute cursor-pointer hidden text-3xl font-bold text-black hover:text-white rounded-full bg-white hover:bg-gray-900  leading-tight text-center z-10 inset-y-0 right-0 my-auto">›</label>
177 | 
178 |             <!-- Add additional indicators for each slide-->
179 |             <ol class="carousel-indicators">
180 |                 <li class="inline-block mr-3">
181 |                     <label for="carousel-1" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label>
182 |                 </li>
183 |                 <li class="inline-block mr-3">
184 |                     <label for="carousel-2" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label>
185 |                 </li>
186 |                 <li class="inline-block mr-3">
187 |                     <label for="carousel-3" class="carousel-bullet cursor-pointer block text-4xl text-gray-400 hover:text-gray-900">•</label>
188 |                 </li>
189 |             </ol>
190 | 
191 |         </div>
192 |     </div>
193 | 
194 |     <!--	 
195 | 
196 | Alternatively if you want to just have a single hero
197 | 
198 | <section class="w-full mx-auto bg-nordic-gray-light flex pt-12 md:pt-0 md:items-center bg-cover bg-right" style="max-width:1600px; height: 32rem; background-image: url('https://images.unsplash.com/photo-1422190441165-ec2956dc9ecc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80');">
199 | 
200 | 	<div class="container mx-auto">
201 | 
202 | 		<div class="flex flex-col w-full lg:w-1/2 justify-center items-start  px-6 tracking-wide">
203 | 			<h1 class="text-black text-2xl my-4">Stripy Zig Zag Jigsaw Pillow and Duvet Set</h1>
204 | 			<a class="text-xl inline-block no-underline border-b border-gray-600 leading-relaxed hover:text-black hover:border-black" href="#">products</a>
205 | 
206 | 		</div>
207 | 
208 | 	  </div>
209 | 
210 | </section>
211 | 
212 | -->
213 | 
214 |     <section class="bg-white py-8">
215 | 
216 |         <div class="container mx-auto flex items-center flex-wrap pt-4 pb-12">
217 | 
218 |             <nav id="store" class="w-full z-30 top-0 px-6 py-1">
219 |                 <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-3">
220 | 
221 |                     <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl " href="#">
222 | 				Store
223 | 			</a>
224 | 
225 |                     <div class="flex items-center" id="store-nav-content">
226 | 
227 |                         <a class="pl-3 inline-block no-underline hover:text-black" href="#">
228 |                             <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
229 |                                 <path d="M7 11H17V13H7zM4 7H20V9H4zM10 15H14V17H10z" />
230 |                             </svg>
231 |                         </a>
232 | 
233 |                         <a class="pl-3 inline-block no-underline hover:text-black" href="#">
234 |                             <svg class="fill-current hover:text-black" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
235 |                                 <path d="M10,18c1.846,0,3.543-0.635,4.897-1.688l4.396,4.396l1.414-1.414l-4.396-4.396C17.365,13.543,18,11.846,18,10 c0-4.411-3.589-8-8-8s-8,3.589-8,8S5.589,18,10,18z M10,4c3.309,0,6,2.691,6,6s-2.691,6-6,6s-6-2.691-6-6S6.691,4,10,4z" />
236 |                             </svg>
237 |                         </a>
238 | 
239 |                     </div>
240 |               </div>
241 |             </nav>
242 | 
243 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
244 |                 <a href="#">
245 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1555982105-d25af4182e4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
246 |                     <div class="pt-3 flex items-center justify-between">
247 |                         <p class="">Product Name</p>
248 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
249 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
250 |                         </svg>
251 |                     </div>
252 |                     <p class="pt-1 text-gray-900">£9.99</p>
253 |                 </a>
254 |             </div>
255 | 
256 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
257 |                 <a href="#">
258 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1508423134147-addf71308178?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
259 |                     <div class="pt-3 flex items-center justify-between">
260 |                         <p class="">Product Name</p>
261 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
262 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
263 |                         </svg>
264 |                     </div>
265 |                     <p class="pt-1 text-gray-900">£9.99</p>
266 |                 </a>
267 |             </div>
268 | 
269 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
270 |                 <a href="#">
271 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
272 |                     <div class="pt-3 flex items-center justify-between">
273 |                         <p class="">Product Name</p>
274 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
275 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
276 |                         </svg>
277 |                     </div>
278 |                     <p class="pt-1 text-gray-900">£9.99</p>
279 |                 </a>
280 |             </div>
281 | 
282 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
283 |                 <a href="#">
284 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
285 |                     <div class="pt-3 flex items-center justify-between">
286 |                         <p class="">Product Name</p>
287 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
288 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
289 |                         </svg>
290 |                     </div>
291 |                     <p class="pt-1 text-gray-900">£9.99</p>
292 |                 </a>
293 |             </div>
294 | 
295 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
296 |                 <a href="#">
297 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1467949576168-6ce8e2df4e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
298 |                     <div class="pt-3 flex items-center justify-between">
299 |                         <p class="">Product Name</p>
300 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
301 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
302 |                         </svg>
303 |                     </div>
304 |                     <p class="pt-1 text-gray-900">£9.99</p>
305 |                 </a>
306 |             </div>
307 | 
308 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
309 |                 <a href="#">
310 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
311 |                     <div class="pt-3 flex items-center justify-between">
312 |                         <p class="">Product Name</p>
313 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
314 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
315 |                         </svg>
316 |                     </div>
317 |                     <p class="pt-1 text-gray-900">£9.99</p>
318 |                 </a>
319 |             </div>
320 | 
321 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
322 |                 <a href="#">
323 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1550837368-6594235de85c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&h=400&q=80">
324 |                     <div class="pt-3 flex items-center justify-between">
325 |                         <p class="">Product Name</p>
326 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
327 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
328 |                         </svg>
329 |                     </div>
330 |                     <p class="pt-1 text-gray-900">£9.99</p>
331 |                 </a>
332 |             </div>
333 | 
334 |             <div class="w-full md:w-1/3 xl:w-1/4 p-6 flex flex-col">
335 |                 <a href="#">
336 |                     <img class="hover:grow hover:shadow-lg" src="https://images.unsplash.com/photo-1551431009-a802eeec77b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=400&q=80">
337 |                     <div class="pt-3 flex items-center justify-between">
338 |                         <p class="">Product Name</p>
339 |                         <svg class="h-6 w-6 fill-current text-gray-500 hover:text-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
340 |                             <path d="M12,4.595c-1.104-1.006-2.512-1.558-3.996-1.558c-1.578,0-3.072,0.623-4.213,1.758c-2.353,2.363-2.352,6.059,0.002,8.412 l7.332,7.332c0.17,0.299,0.498,0.492,0.875,0.492c0.322,0,0.609-0.163,0.792-0.409l7.415-7.415 c2.354-2.354,2.354-6.049-0.002-8.416c-1.137-1.131-2.631-1.754-4.209-1.754C14.513,3.037,13.104,3.589,12,4.595z M18.791,6.205 c1.563,1.571,1.564,4.025,0.002,5.588L12,18.586l-6.793-6.793C3.645,10.23,3.646,7.776,5.205,6.209 c0.76-0.756,1.754-1.172,2.799-1.172s2.035,0.416,2.789,1.17l0.5,0.5c0.391,0.391,1.023,0.391,1.414,0l0.5-0.5 C14.719,4.698,17.281,4.702,18.791,6.205z" />
341 |                         </svg>
342 |                     </div>
343 |                     <p class="pt-1 text-gray-900">£9.99</p>
344 |                 </a>
345 |             </div>
346 | 
347 |             </div>
348 | 
349 |     </section>
350 | 
351 |     <section class="bg-white py-8">
352 | 
353 |         <div class="container py-8 px-6 mx-auto">
354 | 
355 |             <a class="uppercase tracking-wide no-underline hover:no-underline font-bold text-gray-800 text-xl mb-8" href="#">
356 | 			About
357 | 		</a>
358 | 
359 |             <p class="mt-8 mb-8">This template is inspired by the stunning nordic minimalist design - in particular:
360 |                 <br>
361 |                 <a class="text-gray-800 underline hover:text-gray-900" href="http://savoy.nordicmade.com/" target="_blank">Savoy Theme</a> created by <a class="text-gray-800 underline hover:text-gray-900" href="https://nordicmade.com/">https://nordicmade.com/</a> and <a class="text-gray-800 underline hover:text-gray-900" href="https://www.metricdesign.no/" target="_blank">https://www.metricdesign.no/</a></p>
362 | 
363 |             <p class="mb-8">Lorem ipsum dolor sit amet, consectetur <a href="#">random link</a> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Vitae aliquet nec ullamcorper sit. Nullam eget felis eget nunc lobortis mattis aliquam. In est ante in nibh mauris. Egestas congue quisque egestas diam in. Facilisi nullam vehicula ipsum a arcu. Nec nam aliquam sem et tortor consequat. Eget mi proin sed libero enim sed faucibus turpis in. Hac habitasse platea dictumst quisque. In aliquam sem fringilla ut. Gravida rutrum quisque non tellus orci ac auctor augue mauris. Accumsan lacus vel facilisis volutpat est velit egestas dui id. At tempor commodo ullamcorper a. Volutpat commodo sed egestas egestas fringilla. Vitae congue eu consequat ac.</p>
364 | 
365 |         </div>
366 | 
367 |     </section>
368 | 
369 | <footer class="container mx-auto bg-white py-8 border-t border-gray-400">
370 |   <div class="container flex px-3 py-8 ">
371 |     <div class="w-full mx-auto flex flex-wrap">
372 |       <div class="flex w-full lg:w-1/2 ">
373 |         <div class="px-3 md:px-0">
374 |           <h3 class="font-bold text-gray-900">About</h3>
375 |           <p class="py-4">
376 |             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel mi ut felis tempus commodo nec id erat. Suspendisse consectetur dapibus velit ut lacinia.
377 |           </p>
378 |         </div>
379 |       </div>
380 |       <div class="flex w-full lg:w-1/2 lg:justify-end lg:text-right mt-6 md:mt-0">
381 |         <div class="px-3 md:px-0">
382 |           <h3 class="text-left font-bold text-gray-900">Social</h3>
383 | 
384 |           <div class="w-full flex items-center py-4 mt-0">
385 |             <a href="#" class="mx-2">
386 |               <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
387 |                 <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
388 |               </svg>
389 |             </a>
390 |             <a href="#" class="mx-2">
391 |               <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
392 |                 <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
393 |               </svg>
394 |             </a>
395 |             <a href="#" class="mx-2">
396 |               <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
397 |                 <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"></path>
398 |               </svg>
399 |             </a>
400 |             <a href="#" class="mx-2">
401 |               <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24">
402 |                 <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"></path>
403 |               </svg>
404 |             </a>
405 |           </div>
406 |         </div>
407 |       </div>
408 |     </div>
409 |   </div>
410 | </footer>
411 | 
412 | </body>
413 | 
414 | </html>
415 | 


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