Landing Page Free Template for your website
index.html
1
<!DOCTYPE html>2
<html>3
<head>4
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css">5
<title>HTML Landing Page Free Template</title>6
</head>7
<body>8
<header class="text-gray-700 body-font border-b border-gray-200">9
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">10
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="https://tailblocks.cc" target="_blank">11
<span class="ml-3 text-xl">LandingPages</span>12
</a>13
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">14
<a class="mr-5 hover:text-gray-900">First Link</a>15
<a class="mr-5 hover:text-gray-900">Second Link</a>16
<a class="mr-5 hover:text-gray-900">Third Link</a>17
<a class="mr-5 hover:text-gray-900">Fourth Link</a>18
</nav>19
</div>20
</header>21
<section class="text-gray-700 body-font">22
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">23
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">24
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Write your title here25
</h1>26
<p class="mb-8 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum. Suspendisse potenti. Vestibulum a sem ac eros egestas lacinia sed sit amet erat.</p>27
<div class="flex justify-center">28
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>29
</div>30
</div>31
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">32
<img class="object-cover object-center rounded" alt="hero" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">33
</div>34
</div>35
</section>36
<section class="text-gray-700 body-font border-t border-gray-200">37
<div class="container px-5 py-24 mx-auto">38
<div class="flex flex-col text-center w-full mb-20">39
<h2 class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1">Write your title here</h2>40
<h1 class="sm:text-3xl text-2xl font-medium title-font text-gray-900">Write your title here</h1>41
</div>42
<div class="flex flex-wrap -m-4">43
<div class="p-4 md:w-1/3">44
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">45
<div class="flex items-center mb-3">46
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">47
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">48
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>49
</svg>50
</div>51
<h2 class="text-gray-900 text-lg title-font font-medium">Title 1</h2>52
</div>53
<div class="flex-grow">54
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum. Suspendisse potenti. Vestibulum a sem ac eros egestas lacinia sed sit amet erat.</p>55
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More56
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">57
<path d="M5 12h14M12 5l7 7-7 7"></path>58
</svg>59
</a>60
</div>61
</div>62
</div>63
<div class="p-4 md:w-1/3">64
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">65
<div class="flex items-center mb-3">66
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">67
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">68
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>69
<circle cx="12" cy="7" r="4"></circle>70
</svg>71
</div>72
<h2 class="text-gray-900 text-lg title-font font-medium">Title 2</h2>73
</div>74
<div class="flex-grow">75
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum. Suspendisse potenti. Vestibulum a sem ac eros egestas lacinia sed sit amet erat.</p>76
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More77
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">78
<path d="M5 12h14M12 5l7 7-7 7"></path>79
</svg>80
</a>81
</div>82
</div>83
</div>84
<div class="p-4 md:w-1/3">85
<div class="flex rounded-lg h-full bg-gray-100 p-8 flex-col">86
<div class="flex items-center mb-3">87
<div class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">88
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">89
<circle cx="6" cy="6" r="3"></circle>90
<circle cx="6" cy="18" r="3"></circle>91
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>92
</svg>93
</div>94
<h2 class="text-gray-900 text-lg title-font font-medium">Title 3</h2>95
</div>96
<div class="flex-grow">97
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum. Suspendisse potenti. Vestibulum a sem ac eros egestas lacinia sed sit amet erat.</p>98
<a class="mt-3 text-indigo-500 inline-flex items-center">Learn More99
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">100
<path d="M5 12h14M12 5l7 7-7 7"></path>101
</svg>102
</a>103
</div>104
</div>105
</div>106
</div>107
</div>108
</section>109
<section class="text-gray-700 body-font border-t border-gray-200">110
<div class="container px-5 py-24 mx-auto">111
<div class="flex flex-wrap w-full mb-20 flex-col items-center text-center">112
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">Title</h1>113
<p class="lg:w-1/2 w-full leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>114
</div>115
<div class="flex flex-wrap -m-4">116
<div class="xl:w-1/3 md:w-1/2 p-4">117
<div class="border border-gray-300 p-6 rounded-lg">118
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">119
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">120
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>121
</svg>122
</div>123
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Title</h2>124
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>125
</div>126
</div>127
<div class="xl:w-1/3 md:w-1/2 p-4">128
<div class="border border-gray-300 p-6 rounded-lg">129
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">130
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">131
<circle cx="6" cy="6" r="3"></circle>132
<circle cx="6" cy="18" r="3"></circle>133
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>134
</svg>135
</div>136
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Title</h2>137
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>138
</div>139
</div>140
<div class="xl:w-1/3 md:w-1/2 p-4">141
<div class="border border-gray-300 p-6 rounded-lg">142
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">143
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">144
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>145
<circle cx="12" cy="7" r="4"></circle>146
</svg>147
</div>148
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Title</h2>149
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>150
</div>151
</div>152
<div class="xl:w-1/3 md:w-1/2 p-4">153
<div class="border border-gray-300 p-6 rounded-lg">154
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">155
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">156
<path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1zM4 22v-7"></path>157
</svg>158
</div>159
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Title</h2>160
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>161
</div>162
</div>163
<div class="xl:w-1/3 md:w-1/2 p-4">164
<div class="border border-gray-300 p-6 rounded-lg">165
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">166
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">167
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>168
</svg>169
</div>170
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Title</h2>171
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>172
</div>173
</div>174
<div class="xl:w-1/3 md:w-1/2 p-4">175
<div class="border border-gray-300 p-6 rounded-lg">176
<div class="w-10 h-10 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-4">177
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">178
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>179
</svg>180
</div>181
<h2 class="text-lg text-gray-900 font-medium title-font mb-2">Title</h2>182
<p class="leading-relaxed text-base">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum</p>183
</div>184
</div>185
</div>186
<button class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>187
</div>188
</section>189
<section class="text-gray-700 body-font border-t border-gray-200">190
<div class="container px-5 py-24 mx-auto">191
<div class="flex flex-col text-center w-full mb-20">192
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Our Team</h1>193
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">194
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum. Suspendisse potenti. Vestibulum a sem ac eros egestas lacinia sed sit amet erat</p>195
</div>196
<div class="flex flex-wrap -m-2">197
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">198
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">199
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">200
<div class="flex-grow">201
<h2 class="text-gray-900 title-font font-medium">Member</h2>202
<p class="text-gray-500">UI Designer</p>203
</div>204
</div>205
</div>206
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">207
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">208
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">209
<div class="flex-grow">210
<h2 class="text-gray-900 title-font font-medium">Member</h2>211
<p class="text-gray-500">CTO</p>212
</div>213
</div>214
</div>215
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">216
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">217
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">218
<div class="flex-grow">219
<h2 class="text-gray-900 title-font font-medium">Member</h2>220
<p class="text-gray-500">Founder</p>221
</div>222
</div>223
</div>224
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">225
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">226
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">227
<div class="flex-grow">228
<h2 class="text-gray-900 title-font font-medium">Member</h2>229
<p class="text-gray-500">DevOps</p>230
</div>231
</div>232
</div>233
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">234
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">235
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">236
<div class="flex-grow">237
<h2 class="text-gray-900 title-font font-medium">Member</h2>238
<p class="text-gray-500">Software Engineer</p>239
</div>240
</div>241
</div>242
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">243
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">244
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">245
<div class="flex-grow">246
<h2 class="text-gray-900 title-font font-medium">Member</h2>247
<p class="text-gray-500">UX Researcher</p>248
</div>249
</div>250
</div>251
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">252
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">253
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">254
<div class="flex-grow">255
<h2 class="text-gray-900 title-font font-medium">Member</h2>256
<p class="text-gray-500">QA Engineer</p>257
</div>258
</div>259
</div>260
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">261
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">262
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">263
<div class="flex-grow">264
<h2 class="text-gray-900 title-font font-medium">Member</h2>265
<p class="text-gray-500">System</p>266
</div>267
</div>268
</div>269
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">270
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">271
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png">272
<div class="flex-grow">273
<h2 class="text-gray-900 title-font font-medium">Member</h2>274
<p class="text-gray-500">Product Manager</p>275
</div>276
</div>277
</div>278
</div>279
</div>280
</section>281
<section class="text-gray-700 body-font border-t border-gray-200">282
<div class="container px-5 py-24 mx-auto">283
<div class="xl:w-1/2 lg:w-3/4 w-full mx-auto text-center">284
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="inline-block w-8 h-8 text-gray-400 mb-8" viewBox="0 0 975.036 975.036">285
<path d="M925.036 57.197h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.399 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l36 76c11.6 24.399 40.3 35.1 65.1 24.399 66.2-28.6 122.101-64.8 167.7-108.8 55.601-53.7 93.7-114.3 114.3-181.9 20.601-67.6 30.9-159.8 30.9-276.8v-239c0-27.599-22.401-50-50-50zM106.036 913.497c65.4-28.5 121-64.699 166.9-108.6 56.1-53.7 94.4-114.1 115-181.2 20.6-67.1 30.899-159.6 30.899-277.5v-239c0-27.6-22.399-50-50-50h-304c-27.6 0-50 22.4-50 50v304c0 27.601 22.4 50 50 50h145.5c-1.9 79.601-20.4 143.3-55.4 191.2-27.6 37.8-69.4 69.1-125.3 93.8-25.7 11.3-36.8 41.7-24.8 67.101l35.9 75.8c11.601 24.399 40.501 35.2 65.301 24.399z"></path>286
</svg>287
<p class="leading-relaxed text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ultricies bibendum. Suspendisse potenti. Vestibulum a sem ac eros egestas lacinia sed sit amet erat. Mauris euismod vehicula eros, ac consectetur turpis accumsan ac. Vivamus vel vestibulum purus. Donec consectetur consequat hendrerit. Mauris ac venenatis arcu. Proin tortor urna, accumsan et nisi et, egestas rhoncus nisi. Curabitur at est consectetur, fermentum tortor ac, dapibus erat. Morbi facilisis ullamcorper elit at accumsan. Aenean et tellus et tortor fermentum pulvinar.288
289
</p>290
<span class="inline-block h-1 w-10 rounded bg-indigo-500 mt-8 mb-6"></span>291
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">Author</h2>292
<p class="text-gray-500">Position</p>293
</div>294
</div>295
</section>296
</body>297
</html>298
styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
