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
Animated Coming Soon Page 1
animated coming soon landing page

Anonymous

2 years ago

3.4k
landi page template

Raul antonio de la cruz hernandez

9 months ago

640
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
Login Form
Login Form With google icon

Md. Tofayel islam

1 year ago

2.1k
hero template
hero section

Raul antonio de la cruz hernandez

9 months ago

510
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Coastal UI

1 year ago

2.8k
Travel Landing Page: Australia

Maxim

1 year ago

2.9k

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.