tailwind-css-tutorial/index.html at main · themesberg/tailwind-css-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Tutorial - Themesberg</title>
    <meta name="description"
        content="Landing page example built using the Tailwind CSS Tutorial written on the Themesberg blog.">
    <meta name="keywords"
        content="tailwind css tutorial, tailwind css landing page, tailwind tutorial, tailwind css example, tailwind css boilerplate, tailwind css landing page, tailwind css website">
    <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="output.css">
</head>

<body>

    <header>
        <nav class="flex items-center justify-between p-6 container mx-auto">
            <!-- Logo -->
            <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"><defs><style>.cls-1{fill:#319795;}.cls-2,.cls-4{fill:#2a344f;}.cls-2{opacity:0.32;isolation:isolate;}.cls-3{opacity:0.16;}</style></defs><title>logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Group_16" data-name="Group 16"><g id="Group_15" data-name="Group 15"><g id="Group_12" data-name="Group 12"><path id="Path_35" data-name="Path 35" class="cls-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z"></path><path id="Path_36" data-name="Path 36" class="cls-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z"></path><path id="Path_37" data-name="Path 37" class="cls-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z"></path></g><path id="Path_38" data-name="Path 38" class="cls-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z"></path><g id="Group_13" data-name="Group 13" class="cls-3"><path id="Path_39" data-name="Path 39" class="cls-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z"></path><path id="Path_40" data-name="Path 40" class="cls-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z"></path><path id="Path_41" data-name="Path 41" class="cls-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z"></path></g></g></g></g></g></svg>

            <!-- Menu items -->
            <div class="text-lg text-gray-600 hidden lg:flex">
                <a href="#" class="block mt-4 lg:inline-block text-teal-600 lg:mt-0 mr-10">
                    Home
                </a>
                <a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-10">
                    Services
                </a>
                <a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-10">
                    Portfolio
                </a>
                <a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0 mr-10">
                    Company
                </a>
                <a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0">
                    Contact
                </a>
            </div>

            <!-- CTA and Hamburger icon -->
            <div class="flex items-center">
                <div class="mr-5 lg:mr-0">
                    <button class="py-2 px-6 rounded-md text-gray-600 hover:text-gray-700 text-lg">Sign in</button>
                    <button class="py-2 px-6 bg-teal-500 hover:bg-teal-600 rounded-md text-white text-lg">Sign up</button>
                </div>
                <div class="block lg:hidden">
                    <button
                        class="flex items-center px-4 py-3 border rounded text-teal-500 border-teal-500 focus:outline-none">
                        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <title>Menu</title>
                            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
                        </svg>
                    </button>
                </div>
            </div>
        </nav>
    </header>

    <main class="mt-12 lg:mt-32">
        <section class="container mx-auto px-6">
            <div class="w-full lg:flex items-center">
                <div class="w-full lg:w-1/2">
                    <h2 class="text-md lg:text-2xl text-gray-600">Market Intelligence Solutions to</h2>
                    <h1 class="text-5xl lg:text-6xl font-bold text-teal-600 mb-2 lg:mb-6">Win your market</h1>
                    <p class="text-md lg:text-xl font-light text-gray-800 mb-8">Powerful analytics tools for your business. See the exact keywords for which your competitors rank in organic search and the amount of traffic driven by each of them.</p>
                </div>
                <div class="w-full lg:w-1/2 lg:pl-24">
                    <form action="#" class="bg-gray-100 shadow-sm rounded-md p-8">
                        <div class="mb-6">
                            <label for="name" class="mb-3 block text-gray-700">Full name:</label>
                            <input type="text" id="name" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" placeholder="John Doe" required>
                        </div>
                        <div class="mb-6">
                            <label for="email" class="mb-3 block text-gray-700">Email address:</label>
                            <input type="email" id="email" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" placeholder="john.doe@company.com" required>
                        </div>
                        <div class="mb-8">
                            <label for="company_size" class="mb-3 block text-gray-700">Company size:</label>
                            <select id="company_size" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" required>
                                <option value="">Select an option</option>
                                <option value="1">1-10</option>
                                <option value="2">10-50</option>
                                <option value="3">50-100</option>
                                <option value="4">100+</option>
                            </select>
                        </div>
                        <button type="submit" class="py-3 px-12 bg-teal-500 hover:bg-teal-600 mr-5 rounded-md text-white text-lg focus:outline-none w-full">Request Demo</button>
                    </form>
                </div>
            </div>
        </section>
    </main>
</body>

</html>