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 v3.4. It is responsive. similar terms for this example is Front page

Landing Page

Author Prajwal Hallale

Tailwind v3.4 10.2k 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

Freja Jensen

3 years ago

14k
Simple app landing page

Prajwal Hallale

3 years ago

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

Conan Hilton

4 years ago

17k
Simple landing page

Lîmåã M

3 years ago

20.4k
A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

936
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.6k
A Fullscreen Hero Section

Hasan AlDoy (McDoy)

1 year ago

1.9k
Portfolio Hero Section 5

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3k
hero template

Raul antonio de la cruz hernandez

8 months ago

501
Banner with Form

Aitrik Saha

1 year ago

2k
Small landing

Crimson

1 year ago

2.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.