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
section card

Raul antonio de la cruz hernandez

9 months ago

697
hero template
hero section

Raul antonio de la cruz hernandez

9 months ago

510
neo brutalism page
neo brutalism

Ti To

1 year ago

2.7k
card bento

Raul antonio de la cruz hernandez

9 months ago

740
Product Landing Page

Noob

4 years ago

13.3k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k

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.