Home
Prajwal Hallale
Simple app landing page with video preview

Simple app landing page with video preview

Forked from> @prajwal/simple-app-landing-page

This tailwind example is contributed by Prajwal Hallale, on 25-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Front page

Landing Page

Author Prajwal Hallale

10.1k

9

Fork Fullscreen

<div class="bg-gray-50">

<main class="w-full flex justify-center flex-wrap sm:flex-row-reverse gap-6 p-4 md:pt-10">

<div class="px-4 max-w-[640px]">

<img src="data:image/png;base64,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" class="h-20 py-4" alt="audiostory app maker">

<h1
                class="md:text-start text-center pt-2 font-extrabold text-[36px] md:text-[50px] leading-10 md:leading-[54px]">
                #1 App Builder
                <br>
                for audiobooks and podcasts
            </h1>

<p class="md:text-start text-center py-8 text-xl md:text-2xl font-bold text-gray-600">
                Studio makes it easy to create high-quality audio apps
                right on your phone
            </p>

<div class="flex flex-col items-center md:items-start">

<a href="https://www.youtube.com/watch?v=SPAr1TaSW2o">
                    <svg id="svg51" class="h-24 md:h-28 py-6" version="1.1" viewBox="0 0 180 53.333"
                        xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
                        xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
                        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                        <path id="path11"
                            d="m173.33 53.333h-166.66c-3.6666 0-6.6665-2.9999-6.6665-6.6665v-39.999c0-3.6666 2.9999-6.6665 6.6665-6.6665h166.66c3.6666 0 6.6665 2.9999 6.6665 6.6665v39.999c0 3.6666-2.9999 6.6665-6.6665 6.6665"
                            fill="#100f0d" stroke-width=".13333" />
                        <path id="path13"
                            d="m173.33 1e-3h-166.66c-3.6666 0-6.6665 2.9999-6.6665 6.6665v39.999c0 3.6666 2.9999 6.6665 6.6665 6.6665h166.66c3.6666 0 6.6665-2.9999 6.6665-6.6665v-39.999c0-3.6666-2.9999-6.6665-6.6665-6.6665zm0 1.0661c3.0879 0 5.5999 2.5125 5.5999 5.6004v39.999c0 3.0879-2.5119 5.6004-5.5999 5.6004h-166.66c-3.0879 0-5.5993-2.5125-5.5993-5.6004v-39.999c0-3.0879 2.5114-5.6004 5.5993-5.6004h166.66"
                            fill="#a2a2a1" stroke-width=".13333" />
                        <path id="path35"
                            d="m142.58 40h2.4879v-16.669h-2.4879zm22.409-10.664-2.8519 7.2264h-0.0853l-2.9599-7.2264h-2.6799l4.4399 10.1-2.5319 5.6185h2.5946l6.8412-15.718zm-14.11 8.7706c-0.81331 0-1.9506-0.40786-1.9506-1.4156 0-1.2865 1.416-1.7797 2.6373-1.7797 1.0933 0 1.6093 0.23546 2.2733 0.55732-0.19333 1.5442-1.5226 2.6379-2.9599 2.6379zm0.30133-9.1352c-1.8013 0-3.6666 0.79371-4.4386 2.5521l2.208 0.92184c0.47198-0.92184 1.3506-1.2218 2.2733-1.2218 1.2866 0 2.5946 0.77131 2.6159 2.1442v0.17133c-0.45066-0.25733-1.416-0.64318-2.5946-0.64318-2.3813 0-4.8039 1.3077-4.8039 3.7524 0 2.2302 1.952 3.6671 4.1386 3.6671 1.672 0 2.5959-0.75054 3.1732-1.6301h0.0867v1.2874h2.4026v-6.391c0-2.9593-2.2106-4.6103-5.0612-4.6103zm-15.376 2.3937h-3.5386v-5.7133h3.5386c1.86 0 2.9159 1.5396 2.9159 2.8566 0 1.2917-1.056 2.8567-2.9159 2.8567zm-0.064-8.0337h-5.9614v16.669h2.4869v-6.3149h3.4746c2.7573 0 5.4679-1.9958 5.4679-5.1765 0-3.1801-2.7106-5.1769-5.4679-5.1769zm-32.507 14.778c-1.7188 0-3.1573-1.4396-3.1573-3.415 0-1.9984 1.4385-3.4583 3.1573-3.4583 1.6969 0 3.0286 1.46 3.0286 3.4583 0 1.9754-1.3317 3.415-3.0286 3.415zm2.8567-7.8403h-0.086c-0.55826-0.66572-1.6328-1.2672-2.9853-1.2672-2.8359 0-5.4348 2.4921-5.4348 5.6925 0 3.1786 2.5989 5.6488 5.4348 5.6488 1.3525 0 2.427-0.6016 2.9853-1.2885h0.086v0.81558c0 2.1703-1.1598 3.3296-3.0286 3.3296-1.5245 0-2.4697-1.0953-2.8567-2.0188l-2.1691 0.90206c0.62238 1.503 2.2759 3.351 5.0259 3.351 2.9218 0 5.392-1.7188 5.392-5.9077v-10.181h-2.3634zm4.0822 9.7304h2.4906v-16.669h-2.4906zm6.164-5.4988c-0.0641-2.1911 1.6978-3.3078 2.9645-3.3078 0.98851 0 1.8254 0.49425 2.1057 1.2026zm7.7326-1.8906c-0.47238-1.2666-1.9114-3.6082-4.8541-3.6082-2.9218 0-5.3488 2.2983-5.3488 5.6707 0 3.1791 2.4062 5.6707 5.6275 5.6707 2.5989 0 4.1031-1.589 4.7264-2.513l-1.9333-1.289c-0.64465 0.94531-1.5249 1.5682-2.7931 1.5682-1.2666 0-2.1692-0.58012-2.7483-1.7186l7.5815-3.1359zm-60.409-1.8682v2.4057h5.7565c-0.17186 1.3532-0.62292 2.3411-1.3104 3.0286-0.83798 0.83745-2.1483 1.7614-4.4462 1.7614-3.5443 0-6.315-2.8567-6.315-6.4009s2.7707-6.4013 6.315-6.4013c1.9118 0 3.3077 0.75198 4.3388 1.7186l1.6974-1.6973c-1.4396-1.3745-3.351-2.427-6.0362-2.427-4.8552 0-8.9363 3.9524-8.9363 8.807 0 4.8541 4.0811 8.8066 8.9363 8.8066 2.6202 0 4.5967-0.85932 6.143-2.4702 1.5896-1.5896 2.0838-3.8234 2.0838-5.628 0-0.55785-0.04333-1.0734-0.1292-1.5032zm14.772 7.3675c-1.7188 0-3.201-1.4177-3.201-3.4368 0-2.0406 1.4822-3.4364 3.201-3.4364 1.7181 0 3.2003 1.3958 3.2003 3.4364 0 2.0191-1.4822 3.4368-3.2003 3.4368zm0-9.1075c-3.137 0-5.6927 2.3842-5.6927 5.6707 0 3.265 2.5557 5.6707 5.6927 5.6707 3.1358 0 5.692-2.4057 5.692-5.6707 0-3.2865-2.5562-5.6707-5.692-5.6707zm12.417 9.1075c-1.7176 0-3.2003-1.4177-3.2003-3.4368 0-2.0406 1.4828-3.4364 3.2003-3.4364 1.7188 0 3.2005 1.3958 3.2005 3.4364 0 2.0191-1.4817 3.4368-3.2005 3.4368zm0-9.1075c-3.1358 0-5.6915 2.3842-5.6915 5.6707 0 3.265 2.5557 5.6707 5.6915 5.6707 3.137 0 5.6927-2.4057 5.6927-5.6707 0-3.2865-2.5557-5.6707-5.6927-5.6707"
                            fill="#fff" stroke-width=".13333" />
                        <path id="path37"
                            d="m27.622 25.899-14.194 15.066c5.34e-4 0.0031 0.0016 0.0057 0.0021 0.0089 0.43532 1.636 1.9296 2.8406 3.703 2.8406 0.70892 0 1.3745-0.19166 1.9453-0.52812l0.04533-0.02656 15.978-9.22-7.479-8.141"
                            fill="#eb3131" stroke-width=".13333" />
                        <path id="path39"
                            d="m41.983 23.334-0.0136-0.0093-6.8982-3.999-7.7717 6.9156 7.7987 7.7977 6.8618-3.9592c1.203-0.64945 2.0197-1.9177 2.0197-3.3802 0-1.452-0.80571-2.7139-1.9968-3.3655"
                            fill="#f6b60b" stroke-width=".13333" />
                        <path id="path41"
                            d="m13.426 12.37c-0.08533 0.31466-0.13018 0.64425-0.13018 0.98651v26.623c0 0.34162 0.04432 0.67233 0.13072 0.98587l14.684-14.681-14.684-13.914"
                            fill="#5778c5" stroke-width=".13333" />
                        <path id="path43"
                            d="m27.727 26.668 7.3473-7.3451-15.96-9.2534c-0.58012-0.34746-1.2572-0.54799-1.9817-0.54799-1.7734 0-3.2697 1.2068-3.7051 2.8447-5.34e-4 0.0016-5.34e-4 0.0027-5.34e-4 0.0041l14.3 14.298"
                            fill="#3bad49" stroke-width=".13333" />
                        <path id="path33"
                            d="m63.193 13.042h-3.8895v0.96251h2.9146c-0.0792 0.78545-0.39172 1.4021-0.91878 1.85-0.52705 0.44799-1.2 0.67292-1.9958 0.67292-0.87291 0-1.6125-0.30413-2.2186-0.90824-0.59385-0.61665-0.89584-1.3792-0.89584-2.2979 0-0.91864 0.30199-1.6812 0.89584-2.2978 0.60612-0.60412 1.3457-0.90624 2.2186-0.90624 0.44799 0 0.87504 0.07707 1.2666 0.24586 0.39172 0.16866 0.70625 0.40412 0.95211 0.70625l0.73958-0.73958c-0.33546-0.38132-0.76038-0.67292-1.2876-0.88544-0.52705-0.21253-1.077-0.31453-1.6708-0.31453-1.1645 0-2.1519 0.40412-2.9582 1.2104-0.80625 0.80825-1.2104 1.8041-1.2104 2.9811 0 1.177 0.40412 2.175 1.2104 2.9813 0.80625 0.80611 1.7937 1.2104 2.9582 1.2104 1.2229 0 2.1979-0.39172 2.9479-1.1876 0.66038-0.66238 0.99784-1.5582 0.99784-2.679 0-0.1896-0.02293-0.39172-0.05627-0.60425zm1.5068-3.7332v8.0249h4.6852v-0.98544h-3.654v-2.5457h3.2958v-0.96251h-3.2958v-2.5437h3.654v-0.98758zm11.255 0.98758v-0.98758h-5.5145v0.98758h2.2417v7.0373h1.0312v-7.0373zm4.9925-0.98758h-1.0312v8.0249h1.0312zm6.8066 0.98758v-0.98758h-5.5144v0.98758h2.2415v7.0373h1.0312v-7.0373zm10.406 0.05626c-0.79585-0.81877-1.7708-1.2229-2.9354-1.2229-1.1666 0-2.1415 0.40412-2.9374 1.2104-0.79585 0.79585-1.1874 1.7937-1.1874 2.9811s0.39159 2.1854 1.1874 2.9813c0.79585 0.80611 1.7708 1.2104 2.9374 1.2104 1.1541 0 2.1395-0.40426 2.9354-1.2104 0.79585-0.79585 1.1874-1.7938 1.1874-2.9813 0-1.177-0.39159-2.1729-1.1874-2.9686zm-5.1332 0.67078c0.59372-0.60412 1.3229-0.90624 2.1978-0.90624 0.87291 0 1.6021 0.30213 2.1854 0.90624 0.59372 0.59372 0.88531 1.3686 0.88531 2.2978 0 0.93131-0.29159 1.7041-0.88531 2.2979-0.58332 0.60412-1.3125 0.90824-2.1854 0.90824-0.87491 0-1.6041-0.30413-2.1978-0.90824-0.58132-0.60625-0.87291-1.3666-0.87291-2.2979 0-0.92918 0.29159-1.6916 0.87291-2.2978zm8.7706 1.3125-0.0437-1.548h0.0437l4.0791 6.5457h1.077v-8.0249h-1.0312v4.6957l0.0437 1.548h-0.0437l-3.8999-6.2437h-1.2562v8.0249h1.0312z"
                            fill="#fff" stroke="#fff" stroke-miterlimit="10" stroke-width=".26666" />
                    </svg>
                </a>

<div class="flex items-center gap-6 mt-4 pl-1">
                    <a class="text-gray-700 hover:text-orange transition-colors"
                        href="https://www.instagram.com/audiostoryappstudio">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="h-8">
                            <path fill="currentColor"
                                d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z">
                            </path>
                        </svg>
                    </a>
                    <a class="text-gray-700 hover:text-orange transition-colors"
                        href="https://t.me/audiostoryappstudio">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="h-8">
                            <path fill="currentColor"
                                d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
                            </path>
                        </svg>
                    </a>
                    <a class="text-gray-700 hover:text-orange transition-colors"
                        href="https://www.youtube.com/@audiostoryappstudio">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="h-8" viewBox="0 0 24 24">
                            <path
                                d="m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z" />
                        </svg>
                    </a>
                </div>

</div>

</div>

<div class="relative max-w-lg flex justify-center items-center">

<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" width="320" height="640"
                style="box-shadow: 10px 10px 5px 12px rgb(209, 218, 218)"
                class="rounded rounded-xl border border-4 border-black" type="text/html"
                src="https://www.youtube.com/embed/gXPggzt8UnU?autoplay=0&fs=0&iv_load_policy=3&showinfo=0&rel=0&cc_load_policy=0&start=0&end=0&origin=https://youtubeembedcode.com">
            </iframe>

<span class="absolute -right-1 top-28 border border-4 border-black h-10 rounded-md"></span>
            <span class="absolute -right-1 top-[220px] border border-4 border-black h-24 rounded-md"></span>

</div>

</main>

</div>

Related Examples

Landing page

Author:
Freja Jensen

2 years ago

13k
Simple app landing page

Author:
Prajwal Hallale

2 years ago

9.1k
Landing Page Template
source https://github.com/gary149/tailwindcss-landing-gradients/blob/master/index.html

Author:
Conan Hilton

3 years ago

15.1k
A Fullscreen Hero Section

Author:
Brandon D

3 years ago

20.2k
Simple landing page

Author:
Lîmåã M

2 years ago

18.5k
The Future of Web Development
love my product

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

184
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

6 months ago

1.2k
Single Page Portfolio

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

8 months ago

1.7k
Hero

Author:
Hasan AlDoy (McDoy)

7 months ago

1.2k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

1 month ago

127
landing page
web Design

Author:
Hacker Development

4 months ago

670
Animated Coming Soon Page 2
Animated Coming soon Page

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1