Quick Start
How to get started with Tailmars
After purchasing Tailmars, you will be able to download a folder with all of the necessary files. You'll also have access to all future updates.
You have two options, using this project as the starter template and building your website from there, or taking some components and putting them inside your own project.
Using this project
You'll need Node.js, if you don't have installed, you can get it from here
Open a terminal and navigate into the project folder. Install the dependencies by
running npm install
Running npm run dev
will start the project on development mode. This will
open the JIT compiler watcher and add any necessary Tailwind classes to your production
output file.
Import components into your project
You can also install Tailwind into your project, copy the
tailwind.config.js
file, copy the scripts from package.json, and then get
to building!
Customization
Colors
The primary, secondary and complementary colors provide you basic controls to modify your theme's colors.
Primary
Secondary
Complementary
To customize the primary, secondary and complementary colors go to the
tailwind.config.js
file and modify the colors
object.
module.exports = {
// ...
theme: {
extend: {
colors: {
primary: colors.red,
secondary: colors.gray,
complementary: colors.blue,
},
// ...
}
}
// ...
};
Font
To customize the font go to the tailwind.config.js
file and modify the
font-family
object.
module.exports = {
// ...
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
// ...
}
}
// ...
};
Change Log
V1.0.0 - July 31, 2021
- Initial release of Tailmars 🚀
V1.1.0 - September 2, 2021
- Added Mobile App 1 page
- Added Mobile App 2 page
- Added Agency 2 page
- Added Enterprise page
- Added 5 Indie Hacker About Me pages:
V1.2.0 - November 1, 2021
- Added All Pages Overview page
- Added Agency 3 page
- Added Servies page
- Updated Navigation Menu
- Improvments to Indie Hacker pages
V1.3.0 - January 1, 2022
V1.4.0 - July 21, 2022
- Improvements and bug fixes
- Updated TailwindCSS
- Update Home page
- Added a new pricing page.
Buttons
Use our custom button styles for actions in forms, modals, expand/collapse and more.
NOTE: Sometimes the <button>
tag will need to be swapped out for an
<a>
tag depending on the use. If the user is
brought to a new page, a new location on the same page, or linked to a file, email
address, etc., an anchor tag should be used for accessibility.
Filled
Soft
Outline
Cards
Cards provide a flexible and extensible container with lots of variants and options.
Call to Action
<div
class="relative z-10 flex flex-col items-center justify-center w-full px-8 py-12 mx-auto text-center bg-white border border-gray-100 shadow-xl md:justify-between md:text-left md:flex-row rounded-xl"
>
<div>
<h3>Do you have any questions about Tailmars?</h3>
<p class="mt-2 text-gray-600">
Our support team is available for you anytime
</p>
</div>
<button
type="button"
class="flex items-center justify-center max-w-[280px] px-6 py-3 mt-6 text-lg font-medium text-white rounded-md md:mt-0 bg-primary-600 hover:bg-primary-700"
>
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
</svg>
<span>Contact us</span>
</button>
</div>
Stats
<div class="flex flex-row flex-1 w-full max-w-sm gap-4 mt-6">
<div class="flex flex-col flex-1 gap-4 md:pb-16">
<div
class="w-full h-full border border-transparent rounded-md shadow-xl bg-complementary-500 aspect-w-1 aspect-h-1"
>
<div class="flex flex-col justify-center text-center">
<div class="text-2xl font-bold text-white sm:text-4xl">1</div>
<div class="text-sm text-white sm:text-md">Customers</div>
</div>
</div>
<div
class="w-full h-full bg-white border border-gray-100 rounded-md shadow-xl aspect-w-1 aspect-h-1"
>
<div class="flex flex-col justify-center text-center">
<div class="text-2xl font-bold text-gray-800 sm:text-4xl">
5
</div>
<div class="text-sm text-primary-600 sm:text-md">
Downloads
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-1 gap-4 md:pt-16">
<div
class="w-full h-full bg-white border border-gray-100 rounded-md shadow-xl aspect-w-1 aspect-h-1"
>
<div class="flex flex-col justify-center text-center">
<div class="text-2xl font-bold text-gray-800 sm:text-4xl">
100%
</div>
<div class="text-sm text-primary-600 sm:text-md">
Happy clients
</div>
</div>
</div>
<div
class="w-full h-full border border-transparent rounded-md shadow-xl bg-complementary-500 aspect-w-1 aspect-h-1"
>
<div class="flex flex-col justify-center text-center">
<div class="text-2xl font-bold text-white sm:text-4xl">8</div>
<div class="text-sm text-white sm:text-md">Page views</div>
</div>
</div>
</div>
</div>
Projects
<div
class="relative flex items-center justify-center w-full max-w-sm mt-6 overflow-hidden transition duration-300 ease-in-out transform shadow-xl group rounded-xl hover:-translate-y-2"
tabindex="0"
>
<img src="https://source.unsplash.com/random" alt="" class="absolute z-0 object-cover object-center w-full h-full group-hover:mb-1 group-focus:mb-1 rounded-xl"/>
<div
class="relative z-10 w-full h-full transition duration-300 ease-in-out transform bg-black opacity-0 rounded-xl bg-opacity-30 group-hover:-translate-y-0 group-focus:-translate-y-0 group-hover:opacity-100 group-focus:opacity-100 focus-within:opacity-100"
>
<div class="flex flex-col items-start justify-center px-16 py-8">
<div
class="max-w-md ml-2 text-xl text-white transition duration-300 ease-in-out delay-200 transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100 focus:opacity-100"
>
This is a wider card with supporting text below as a natural
lead-in to additional content.
</div>
<div
href="/"
class="flex justify-center w-24 mt-4 transition duration-300 ease-in-out delay-300 transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100 focus:opacity-100"
>
<div
class="relative tracking-wider text-center text-white duration-150 ease-in-out border-b-4 border-white cursor-pointer hover:text-gray-100 hover:border-gray-100 hover:px-2 transision-all"
>
Marketing
</div>
</div>
</div>
<div
class="flex items-center justify-between px-4 py-4 text-sm bg-white rounded-b-xl"
>
<div
class="text-gray-800 transition duration-300 ease-in-out delay-500 transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100"
>
Living Dangerously
</div>
<div
class="flex justify-between gap-4 text-gray-500 transition duration-300 ease-in-out delay-500 transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100 focus-within:opacity-100"
>
<button type="button" class="hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
</svg>
</button>
<button type="button" class="hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</button>
<button type="button" class="hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
Pricing
<div class="flex flex-col items-center p-12 text-center bg-white border border-gray-100 rounded-md shadow-lg md:max-w-xs">
<div>
<h3 class="text-3xl font-bold">$19</h3>
<p class="font-medium text-gray-600">Standard License</p>
</div>
<hr class="w-56 my-12 divider" />
<ul class="space-y-3 text-gray-500">
<li>Link Building</li>
<li>Keyword Research</li>
<li>SEO Audit</li>
<li>Email Marketing</li>
</ul>
<button class="px-5 py-3 mt-8 font-medium text-white rounded-md bg-primary-600 hover:bg-primary-700">
Purchase Now
</button>
</div>
<div class="flex flex-col items-center p-12 text-center text-white border border-transparent rounded-md shadow-lg bg-primary-600 md:max-w-xs">
<div>
<h3 class="text-3xl font-bold">$49</h3>
<p class="font-medium">Extended License</p>
</div>
<hr class="w-56 my-12 divider" />
<ul class="space-y-3 text-gray-200">
<li>Link Building</li>
<li>Keyword Research</li>
<li>SEO Audit</li>
<li>Email Marketing</li>
</ul>
<button class="px-5 py-3 mt-8 font-medium text-gray-800 bg-white rounded-md hover:bg-gray-100">
Purchase Now
</button>
</div>