Published on

What You Need To Create A Browser Frame Mockup With Tailwind CSS

Tags
PagesTabs
Browser Frame Mockup

As a FrontEnd technology blogger, you may have heard of Tailwind CSS, a utility-first CSS framework that allows you to quickly build custom user interfaces. In this article, we will explore how to use Tailwind CSS to create a Browser Frame Mockup UI component.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to quickly build custom user interfaces. It is designed to be highly customizable, allowing you to easily modify the styles of your components without having to write custom CSS.

The description of Browser Frame Mockup UI component

A Browser Frame Mockup is a UI component that simulates a browser window. It is often used to showcase website designs or to create mockups for web applications. The Browser Frame Mockup UI component typically consists of a browser window with a URL bar, navigation buttons, and a content area.

Why use Tailwind CSS to create a Browser Frame Mockup UI component?

Tailwind CSS is an excellent choice for creating a Browser Frame Mockup UI component because it provides a set of pre-defined CSS classes that can be used to quickly style the component. This means that you can focus on the functionality of the component without having to spend too much time on styling.

The preview of Browser Frame Mockup UI component

To create a Browser Frame Mockup UI component with Tailwind CSS, we will use a combination of HTML and CSS. The HTML will define the structure of the component, while the CSS will be used to style it.

Free download of the Browser Frame Mockup's source code

The source code of Browser Frame Mockup UI component

To create a Browser Frame Mockup UI component with Tailwind CSS, we will need to use a combination of HTML and CSS. The HTML will define the structure of the component, while the CSS will be used to style it.

<!-- Browser frame mockup -->
    <div class="relative">
        <!-- Toolbars -->
        <div class="w-full">
            <div class="bg-gray-300 border border-gray-400 rounded-t-lg flex items-stretch">
                <div class="px-4 pt-4 pb-3 mr-4 text-sm flex-0 text-gray-400 whitespace-no-wrap">
                    <i class="mx-1 rounded-full w-3 h-3 bg-gray-400 inline-block"></i>
                    <i class="mx-1 rounded-full w-3 h-3 bg-gray-400 inline-block"></i>
                    <i class="mx-1 rounded-full w-3 h-3 bg-gray-400 inline-block"></i>
                </div>
                <div class="relative px-4 py-2 mt-2 -mb-px flex-0 border-t border-gray-400 bg-gray-100 rounded-t-lg">
                    <!-- Left side of tab -->
                    <div class="absolute bottom-0 w-4 h-8 border-b border-r border-gray-400 bg-gray-300 rounded-br-lg sh" style="right:100%;"></div>
                    <!-- Tab text -->
                    <div class="text-sm overflow-hidden pt-1 w-56 whitespace-no-wrap ">
                        TailwindComponents - Browser Frame Mockup
                    </div>
                    <!-- Tab text fade near end -->
                    <span class="absolute h-full rounded-tr-lg top-0 right-0 m-px w-1/2"
                          style="background: linear-gradient(to right, rgba(247, 250, 252, 0.0) 0%,rgb(247, 250, 252) 80%);"></span>
                    <!-- Tab close button -->
                    <div class="text-gray-500 absolute top-0 right-0 pt-3 pr-2 text-xs">
                        <!-- <i class="fas fa-times-circle"></i> -->
                        <svg class="mx-px w-4 h-4 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                                  clip-rule="evenodd"></path>
                        </svg>
                    </div>
                    <!-- Right side of tab -->
                    <div class="absolute bottom-0 w-4 h-8 border-b border-l border-gray-400 bg-gray-300 rounded-bl-lg sh" style="left:100%;"></div>
                </div>
            </div>
            <div class="bg-gray-100 border-l border-r border-b border-gray-400 flex flex-row py-2">
                <div class="px-4 py-2 flex-0 text-gray-400 whitespace-no-wrap">
                    <!-- <i class="mx-1 fas fa-arrow-left"></i> -->
                    <svg class="mx-px w-6 h-6 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z"
                              clip-rule="evenodd"></path>
                    </svg>
                    <!-- <i class="mx-1 fas fa-arrow-right"></i> -->
                    <svg class="mx-px w-6 h-6 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                              clip-rule="evenodd"></path>
                    </svg>
                    <!-- <i class="mx-1 fas fa-sync"></i> -->
                    <svg class="mx-px w-6 h-6 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                              clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div class="px-4 py-2 my-auto flex-1 border border-gray-400 bg-white rounded-md whitespace-no-wrap overflow-hidden">
                    https://www.tailwindcsscomponent.com/browser-frame-mockup/
                </div>
                <div class="px-4 py-2  flex-0 text-gray-400 whitespace-no-wrap">
                    <!-- <i class="mx-1 fas fa-download"></i> -->
                    <svg class="mx-px w-6 h-6 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                              clip-rule="evenodd"></path>
                    </svg>
                    <!-- <i class="mx-1 fas fa-user-circle"></i> -->
                    <svg class="mx-px w-6 h-6 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                              clip-rule="evenodd"></path>
                    </svg>
                    <!-- <i class="mx-1 fas fa-bars"></i> -->
                    <svg class="mx-px w-6 h-6 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                              clip-rule="evenodd"></path>
                    </svg>
                </div>
            </div>
        </div>
        <!-- Faux Sides -->
        <div class="absolute left-0 border-l border-r border-gray-400 h-16 w-full"></div>
    </div>

    <!-- Page Content  -->
    <div class="w-full">
        <div class="container text-center">
            <svg class="inline-block m-4" width="300px" viewBox="0 0 218 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="TailwindComponents" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="HOME" transform="translate(-101.000000, -30.000000)" fill-rule="nonzero">
                        <g id="Group-7" transform="translate(98.000000, 25.000000)">
                            <g id="tailwindcomponents" transform="translate(35.000000, 14.000000)">
                                <path
                                    d="M4.4930761,15.2663829 C4.79816152,15.2663829 5.05008811,15.2437077 5.24885588,15.1983573 C5.44762365,15.1530069 5.60247761,15.1088499 5.71341776,15.0658863 L5.71341776,15.0658863 L5.38059731,13.5478407 C5.31125972,13.5621619 5.21880959,13.5800634 5.10324693,13.6015452 C4.98768428,13.623027 4.83976407,13.6337678 4.65948633,13.6337678 C4.419116,13.6337678 4.19145757,13.5943846 3.97651103,13.5156181 C3.76156448,13.4368516 3.58590925,13.2793185 3.44954531,13.043019 C3.31318138,12.8067194 3.24499941,12.4498832 3.24499941,11.9725104 L3.24499941,11.9725104 L3.24447166,5.55713523 L5.5192725,5.55661967 L5.5192725,4.1245012 L3.24447166,4.12484491 L3.24499941,1.48940321 L1.60863219,1.48940321 L1.60860366,4.12484491 L0,4.1245012 L0,5.55661967 L1.60860366,5.55713523 L1.60863219,12.4307883 C1.60863219,13.0123152 1.7280151,13.5031018 1.96678092,13.9031481 L2.04199215,14.0204398 C2.33089879,14.4405279 2.69607679,14.7532071 3.13752614,14.9584774 C3.57897549,15.1637477 4.03082548,15.2663829 4.4930761,15.2663829 Z M10.8166647,15.3809524 C11.4360805,15.3809524 11.960735,15.2854778 12.3906281,15.0945287 C12.8205212,14.9035796 13.1648979,14.6720537 13.4237582,14.3999512 C13.6826186,14.1278487 13.8675188,13.8724543 13.978459,13.6337678 L13.978459,13.6337678 L14.0616641,13.6337678 L14.0616641,15.1231711 L15.6980313,15.1231711 L15.6980313,7.87665159 C15.6980313,7.00305932 15.5593561,6.306095 15.2820058,5.78575862 C15.0046554,5.26542225 14.6568118,4.87636339 14.238475,4.61858207 C13.8201381,4.36080074 13.3879338,4.19013996 12.941862,4.10659972 C12.4957901,4.02305947 12.1017214,3.98128935 11.759656,3.98128935 C11.2234452,3.98128935 10.6791451,4.05647557 10.1267556,4.20684801 C9.57436613,4.35722045 9.06589044,4.6197755 8.60132856,4.99451317 C8.13676668,5.36925084 7.76581055,5.89078064 7.48846017,6.5591026 L7.48846017,6.5591026 L9.04162228,7.13194999 C9.22190003,6.73095681 9.5339192,6.35383228 9.9776798,6.00057639 C10.4214404,5.6473205 11.0339225,5.47069256 11.8151261,5.47069256 C12.5685946,5.47069256 13.1313847,5.66641542 13.5034965,6.05786113 C13.8756082,6.44930685 14.0616641,6.9982856 14.0616641,7.70479738 L14.0616641,7.70479738 L14.0616641,7.76208211 C14.0616641,8.03418462 13.9680584,8.22513375 13.7808468,8.3349295 C13.5936353,8.44472525 13.2977949,8.52229834 12.8933256,8.56764875 C12.4888563,8.61299917 11.9630463,8.67863794 11.3158954,8.76456504 C10.8212872,8.83139724 10.3301459,8.92090464 9.8424715,9.03308726 C9.35479708,9.14526987 8.90988085,9.31354379 8.50772281,9.53790902 C8.10556476,9.76227425 7.78430057,10.0713731 7.54393025,10.4652057 C7.30355992,10.8590383 7.18337476,11.3710207 7.18337476,12.0011528 C7.18337476,12.717212 7.34516248,13.3270558 7.66873792,13.8306841 C7.99231336,14.3343125 8.4291402,14.7185976 8.97921845,14.9835395 C9.5292967,15.2484814 10.1417788,15.3809524 10.8166647,15.3809524 Z M11.06628,13.8629068 C10.4145066,13.8629068 9.87714029,13.7137278 9.45418097,13.4153698 C9.03122164,13.1170118 8.81974198,12.6742485 8.81974198,12.0870799 C8.81974198,11.6574444 8.93183776,11.3173162 9.15602931,11.0666955 C9.38022087,10.8160748 9.67606127,10.6275125 10.0435505,10.5010087 C10.4110398,10.3745049 10.8074197,10.2826106 11.2326903,10.2253259 C11.4083455,10.2014572 11.6383152,10.1716214 11.9225993,10.1358185 C12.2068835,10.1000155 12.5004126,10.057052 12.8031868,10.0069278 C13.1059609,9.95680367 13.3740663,9.89713207 13.6075029,9.82791301 C13.8409394,9.75869395 13.9923265,9.68112087 14.0616641,9.59519376 L14.0616641,9.59519376 L14.0616641,11.1418817 C14.0616641,11.6001596 13.9472571,12.0369558 13.718443,12.4522701 C13.489629,12.8675845 13.152186,13.2065192 12.7061141,13.4690742 C12.2600423,13.7316293 11.7134309,13.8629068 11.06628,13.8629068 Z M19.2203811,2.29138955 C19.539334,2.29138955 19.8132175,2.17920694 20.0420316,1.95484171 C20.2708457,1.73047649 20.3852527,1.46076084 20.3852527,1.14569478 C20.3852527,0.830628713 20.2708457,0.560913068 20.0420316,0.336547841 C19.8132175,0.112182614 19.539334,0 19.2203811,0 C18.9014282,0 18.6275447,0.112182614 18.3987306,0.336547841 C18.1699166,0.560913068 18.0555095,0.830628713 18.0555095,1.14569478 C18.0555095,1.46076084 18.1699166,1.73047649 18.3987306,1.95484171 C18.6275447,2.17920694 18.9014282,2.29138955 19.2203811,2.29138955 Z M20.0246972,15.1231711 L20.0246972,4.1245012 L18.38833,4.1245012 L18.38833,15.1231711 L20.0246972,15.1231711 Z M24.3513631,15.1231711 L24.3513631,0.458277911 L22.7149959,0.458277911 L22.7149959,15.1231711 L24.3513631,15.1231711 Z M31.0632422,15.1231711 L33.3929854,6.67367208 L33.5593956,6.67367208 L35.8891388,15.1231711 L37.4977709,15.1231711 L40.7427703,4.1245012 L39.023198,4.1245012 L36.7211899,12.5167154 L36.6102497,12.5167154 L34.3637117,4.1245012 L32.6164043,4.1245012 L30.3421312,12.5453578 L30.2311911,12.5453578 L27.9291829,4.1245012 L26.2096106,4.1245012 L29.45461,15.1231711 L31.0632422,15.1231711 Z M43.433069,2.29138955 C43.7520219,2.29138955 44.0259054,2.17920694 44.2547195,1.95484171 C44.4835336,1.73047649 44.5979406,1.46076084 44.5979406,1.14569478 C44.5979406,0.830628713 44.4835336,0.560913068 44.2547195,0.336547841 C44.0259054,0.112182614 43.7520219,0 43.433069,0 C43.1141161,0 42.8402326,0.112182614 42.6114185,0.336547841 C42.3826045,0.560913068 42.2681974,0.830628713 42.2681974,1.14569478 C42.2681974,1.46076084 42.3826045,1.73047649 42.6114185,1.95484171 C42.8402326,2.17920694 43.1141161,2.29138955 43.433069,2.29138955 Z M44.2373851,15.1231711 L44.2373851,4.1245012 L42.6010179,4.1245012 L42.6010179,15.1231711 L44.2373851,15.1231711 Z M48.564051,15.1231711 L48.564051,8.50678372 C48.564051,7.86710414 48.6819249,7.32289912 48.9176727,6.87416866 C49.1534205,6.42543821 49.4758403,6.08411664 49.8849321,5.85020395 C50.2940239,5.61629127 50.7597415,5.49933493 51.2820847,5.49933493 C52.0401757,5.49933493 52.636479,5.74160164 53.0709946,6.22613505 C53.5055102,6.71066847 53.722768,7.38495758 53.722768,8.24900239 L53.722768,8.24900239 L53.722768,15.1231711 L55.3591352,15.1231711 L55.3591352,8.13443292 C55.3591352,7.19878218 55.2089037,6.42424478 54.9084408,5.8108207 C54.6079779,5.19739662 54.1873299,4.73911871 53.6464966,4.43598696 C53.1056634,4.13285522 52.4746913,3.98128935 51.7535803,3.98128935 C50.9492642,3.98128935 50.2928683,4.15195013 49.7843926,4.4932717 C49.2759169,4.83459327 48.8968714,5.28451716 48.6472561,5.84304336 L48.6472561,5.84304336 L48.5085809,5.84304336 L48.5085809,4.1245012 L46.9276837,4.1245012 L46.9276837,15.1231711 L48.564051,15.1231711 Z M62.0710143,15.35231 C62.7551453,15.35231 63.3029122,15.2341602 63.7143153,14.9978607 C64.1257184,14.7615611 64.44236,14.4918455 64.6642403,14.1887138 C64.8861206,13.885582 65.0571534,13.6337678 65.1773385,13.4332713 L65.1773385,13.4332713 L65.3714838,13.4332713 L65.3714838,15.1231711 L66.952381,15.1231711 L66.952381,0.458277911 L65.3160137,0.458277911 L65.3160137,5.87168573 L65.1773385,5.87168573 C65.0571534,5.6807366 64.8895875,5.43608303 64.674641,5.13772502 C64.4596944,4.839367 64.1499865,4.57203822 63.7455172,4.33573867 C63.3410479,4.09943912 62.7921253,3.98128935 62.0987494,3.98128935 C61.2019831,3.98128935 60.4115346,4.21281517 59.7274036,4.67586681 C59.0432727,5.13891845 58.5093732,5.79530608 58.1257052,6.64502971 C57.7420372,7.49475333 57.5502032,8.49723626 57.5502032,9.6524785 C57.5502032,10.8172682 57.7420372,11.8257183 58.1257052,12.6778288 C58.5093732,13.5299393 59.0409615,14.1887138 59.7204699,14.6541523 C60.3999783,15.1195908 61.1834931,15.35231 62.0710143,15.35231 Z M62.2928946,13.8342644 C61.6087637,13.8342644 61.0367285,13.6468956 60.5767892,13.2721579 C60.1168498,12.8974203 59.7701618,12.3914051 59.5367253,11.7541124 C59.3032887,11.1168196 59.1865704,10.4067276 59.1865704,9.62383613 C59.1865704,8.85049215 59.3009774,8.1523344 59.5297915,7.52936286 C59.7586056,6.90639133 60.1029823,6.41231045 60.5629216,6.04712024 C61.022861,5.68193003 61.5995187,5.49933493 62.2928946,5.49933493 C62.9585355,5.49933493 63.5178588,5.67238258 63.9708644,6.01847788 C64.42387,6.36457317 64.7659355,6.84671972 64.9970608,7.46491753 C65.2281861,8.08311534 65.3437488,8.80275487 65.3437488,9.62383613 C65.3437488,10.4544648 65.2258749,11.1860387 64.990127,11.8185577 C64.7543792,12.4510767 64.4100025,12.9451575 63.9569969,13.3008003 C63.5039913,13.6564431 62.9492905,13.8342644 62.2928946,13.8342644 Z"
                                    id="tailwind" fill="#576574"/>
                                <path
                                    d="M74.9106918,15.2153226 C75.8586857,15.2153226 76.6795098,15.0420315 77.3731639,14.6954493 C78.066818,14.3488671 78.6113365,13.8671179 79.0067193,13.2502016 C79.4021022,12.6332853 79.6229154,11.9181708 79.669159,11.1048579 L79.669159,11.1048579 L76.8806694,11.1048579 C76.8251771,11.4791667 76.708412,11.7991775 76.5303741,12.0648906 C76.3523362,12.3306036 76.1280547,12.5327765 75.8575296,12.6714094 C75.5870045,12.8100422 75.2829528,12.8793587 74.9453745,12.8793587 C74.4875628,12.8793587 74.0875556,12.7545891 73.7453529,12.5050499 C73.4031502,12.2555108 73.1384055,11.8927547 72.9511189,11.4167819 C72.7638323,10.940809 72.670189,10.363172 72.670189,9.68387097 C72.670189,9.01381208 72.7649884,8.44310676 72.9545872,7.97175499 C73.144186,7.50040323 73.4089306,7.14111303 73.7488211,6.89388441 C74.0887116,6.64665579 74.4875628,6.52304147 74.9453745,6.52304147 C75.4864247,6.52304147 75.9245829,6.6859351 76.259849,7.01172235 C76.5951152,7.3375096 76.8020553,7.76611623 76.8806694,8.29754224 L76.8806694,8.29754224 L79.669159,8.29754224 C79.6275397,7.4749872 79.4032582,6.75871736 78.9963145,6.14873272 C78.5893707,5.53874808 78.0367596,5.06508577 77.3384812,4.72774578 C76.6402027,4.39040579 75.8263152,4.22173579 74.8968187,4.22173579 C73.8193426,4.22173579 72.8898461,4.45394585 72.1083291,4.91836598 C71.3268122,5.3827861 70.7244892,6.02742896 70.3013602,6.85229455 C69.8782312,7.67716014 69.6666667,8.63488223 69.6666667,9.72546083 C69.6666667,10.8021761 69.875919,11.7541219 70.2944236,12.581298 C70.7129283,13.4084741 71.3140952,14.0542723 72.0979243,14.5186924 C72.8817535,14.9831125 73.8193426,15.2153226 74.9106918,15.2153226 Z M86.0757253,15.2153226 C87.1532014,15.2153226 88.083854,14.9854231 88.8676832,14.525624 C89.6515123,14.065825 90.2561475,13.4234927 90.6815887,12.5986271 C91.1070299,11.7737615 91.3197504,10.8160394 91.3197504,9.72546083 C91.3197504,8.62564004 91.1070299,7.66329685 90.6815887,6.83843126 C90.2561475,6.01356567 89.6515123,5.37123336 88.8676832,4.91143433 C88.083854,4.4516353 87.1532014,4.22173579 86.0757253,4.22173579 C84.9982493,4.22173579 84.0675967,4.4516353 83.2837675,4.91143433 C82.4999384,5.37123336 81.8953032,6.01356567 81.469862,6.83843126 C81.0444208,7.66329685 80.8317002,8.62564004 80.8317002,9.72546083 C80.8317002,10.8160394 81.0444208,11.7737615 81.469862,12.5986271 C81.8953032,13.4234927 82.4999384,14.065825 83.2837675,14.525624 C84.0675967,14.9854231 84.9982493,15.2153226 86.0757253,15.2153226 Z M86.0895984,12.9278802 C85.5947918,12.9278802 85.1797554,12.788092 84.8444893,12.5085157 C84.5092231,12.2289395 84.2571955,11.8465438 84.0884063,11.3613287 C83.9196171,10.8761137 83.8352226,10.3238927 83.8352226,9.7046659 C83.8352226,9.08543907 83.9196171,8.53321813 84.0884063,8.04800307 C84.2571955,7.56278802 84.5092231,7.17923707 84.8444893,6.89735023 C85.1797554,6.61546339 85.5947918,6.47451997 86.0895984,6.47451997 C86.5797807,6.47451997 86.9890366,6.61546339 87.3173662,6.89735023 C87.6456958,7.17923707 87.8942552,7.56278802 88.0630444,8.04800307 C88.2318335,8.53321813 88.3162281,9.08543907 88.3162281,9.7046659 C88.3162281,10.3238927 88.2318335,10.8761137 88.0630444,11.3613287 C87.8942552,11.8465438 87.6456958,12.2289395 87.3173662,12.5085157 C86.9890366,12.788092 86.5797807,12.9278802 86.0895984,12.9278802 Z M95.897854,15.0073733 L95.897854,8.61639785 C95.897854,8.22360471 95.974156,7.88048835 96.1267599,7.58704877 C96.2793638,7.29360919 96.486304,7.06486495 96.7475803,6.90081605 C97.0088567,6.73676715 97.3036597,6.6547427 97.6319893,6.6547427 C98.1175472,6.6547427 98.5094618,6.80954941 98.8077331,7.11916283 C99.1060043,7.42877624 99.25514,7.84467486 99.25514,8.36685868 L99.25514,8.36685868 L99.25514,15.0073733 L102.119931,15.0073733 L102.119931,8.50549155 C102.119931,7.95096006 102.270223,7.50386905 102.570807,7.16421851 C102.87139,6.82456797 103.289895,6.6547427 103.826321,6.6547427 C104.298005,6.6547427 104.691076,6.80261777 105.005533,7.0983679 C105.319989,7.39411802 105.477217,7.83774322 105.477217,8.42924347 L105.477217,8.42924347 L105.477217,15.0073733 L108.425247,15.0073733 L108.425247,7.84698541 C108.425247,6.69171147 108.114259,5.79868472 107.492283,5.16790515 C106.870306,4.53712558 106.062199,4.22173579 105.067961,4.22173579 C104.286444,4.22173579 103.610132,4.40542435 103.039023,4.77280146 C102.467915,5.14017857 102.073688,5.62885945 101.856343,6.23884409 L101.856343,6.23884409 L101.745358,6.23884409 C101.574257,5.61961726 101.232054,5.12862583 100.71875,4.76586982 C100.205446,4.4031138 99.5834696,4.22173579 98.8528206,4.22173579 C98.1314203,4.22173579 97.511756,4.40195853 96.9938275,4.76240399 C96.4758991,5.12284946 96.1059503,5.61499616 95.883981,6.23884409 L95.883981,6.23884409 L95.7591232,6.23884409 L95.7591232,4.36036866 L92.9428875,4.36036866 L92.9428875,15.0073733 L95.897854,15.0073733 Z M113.40565,19 L113.40565,13.3021889 L113.495825,13.3021889 C113.629932,13.5979391 113.824155,13.8902234 114.078494,14.1790419 C114.332834,14.4678603 114.660008,14.707002 115.060015,14.896467 C115.460022,15.0859319 115.946736,15.1806644 116.520157,15.1806644 C117.32942,15.1806644 118.061225,14.9715598 118.715572,14.5533506 C119.369919,14.1351414 119.887848,13.5182252 120.269357,12.7026018 C120.650867,11.8869784 120.841622,10.8853559 120.841622,9.69773425 C120.841622,8.47776498 120.645087,7.46227919 120.252016,6.65127688 C119.858945,5.84027458 119.33408,5.23260049 118.677421,4.82825461 C118.020762,4.42390873 117.303986,4.22173579 116.527094,4.22173579 C115.930551,4.22173579 115.432276,4.32224462 115.032269,4.52326229 C114.632262,4.72427995 114.308556,4.97381912 114.061153,5.2718798 C113.81375,5.56994048 113.625307,5.86222478 113.495825,6.14873272 L113.495825,6.14873272 L113.364031,6.14873272 L113.364031,4.36036866 L110.450683,4.36036866 L110.450683,19 L113.40565,19 Z M115.583724,12.8308372 C115.107415,12.8308372 114.702783,12.7002912 114.369829,12.4391993 C114.036875,12.1781074 113.782535,11.8118856 113.60681,11.3405338 C113.431084,10.869182 113.343221,10.3169611 113.343221,9.68387097 C113.343221,9.05078085 113.431084,8.50087046 113.60681,8.03413978 C113.782535,7.56740911 114.035719,7.20696365 114.366361,6.95280338 C114.697003,6.69864311 115.10279,6.57156298 115.583724,6.57156298 C116.069282,6.57156298 116.478538,6.70326421 116.811492,6.96666667 C117.144446,7.23006912 117.396473,7.59513569 117.567575,8.06186636 C117.738676,8.52859703 117.824227,9.06926523 117.824227,9.68387097 C117.824227,10.3030978 117.73752,10.8495424 117.564106,11.3232047 C117.390693,11.796867 117.137509,12.1665547 116.804555,12.4322677 C116.471601,12.6979807 116.064657,12.8308372 115.583724,12.8308372 Z M127.312009,15.2153226 C128.389485,15.2153226 129.320138,14.9854231 130.103967,14.525624 C130.887796,14.065825 131.492432,13.4234927 131.917873,12.5986271 C132.343314,11.7737615 132.556034,10.8160394 132.556034,9.72546083 C132.556034,8.62564004 132.343314,7.66329685 131.917873,6.83843126 C131.492432,6.01356567 130.887796,5.37123336 130.103967,4.91143433 C129.320138,4.4516353 128.389485,4.22173579 127.312009,4.22173579 C126.234533,4.22173579 125.303881,4.4516353 124.520052,4.91143433 C123.736222,5.37123336 123.131587,6.01356567 122.706146,6.83843126 C122.280705,7.66329685 122.067984,8.62564004 122.067984,9.72546083 C122.067984,10.8160394 122.280705,11.7737615 122.706146,12.5986271 C123.131587,13.4234927 123.736222,14.065825 124.520052,14.525624 C125.303881,14.9854231 126.234533,15.2153226 127.312009,15.2153226 Z M127.325882,12.9278802 C126.831076,12.9278802 126.416039,12.788092 126.080773,12.5085157 C125.745507,12.2289395 125.49348,11.8465438 125.32469,11.3613287 C125.155901,10.8761137 125.071507,10.3238927 125.071507,9.7046659 C125.071507,9.08543907 125.155901,8.53321813 125.32469,8.04800307 C125.49348,7.56278802 125.745507,7.17923707 126.080773,6.89735023 C126.416039,6.61546339 126.831076,6.47451997 127.325882,6.47451997 C127.816065,6.47451997 128.225321,6.61546339 128.55365,6.89735023 C128.88198,7.17923707 129.130539,7.56278802 129.299328,8.04800307 C129.468118,8.53321813 129.552512,9.08543907 129.552512,9.7046659 C129.552512,10.3238927 129.468118,10.8761137 129.299328,11.3613287 C129.130539,11.8465438 128.88198,12.2289395 128.55365,12.5085157 C128.225321,12.788092 127.816065,12.9278802 127.325882,12.9278802 Z M137.134138,15.0073733 L137.134138,8.85207373 C137.138762,8.39458525 137.225469,8.00294739 137.394258,7.67716014 C137.563048,7.35137289 137.79889,7.10298899 138.101786,6.93200845 C138.404681,6.76102791 138.754977,6.67553763 139.152672,6.67553763 C139.74459,6.67553763 140.209338,6.85922619 140.546916,7.2266033 C140.884495,7.59398041 141.050972,8.10345622 141.046347,8.75503072 L141.046347,8.75503072 L141.046347,15.0073733 L144.001314,15.0073733 L144.001314,8.22822581 C144.001314,7.40104967 143.84871,6.68824565 143.543502,6.08981375 C143.238294,5.49138185 142.810541,5.03042755 142.260242,4.70695084 C141.709943,4.38347414 141.064845,4.22173579 140.324947,4.22173579 C139.534181,4.22173579 138.861337,4.4031138 138.306414,4.76586982 C137.75149,5.12862583 137.356107,5.61961726 137.120265,6.23884409 L137.120265,6.23884409 L136.995407,6.23884409 L136.995407,4.36036866 L134.179172,4.36036866 L134.179172,15.0073733 L137.134138,15.0073733 Z M150.876784,15.2153226 C151.755413,15.2153226 152.531149,15.0801555 153.203994,14.8098214 C153.876838,14.5394873 154.427137,14.1605575 154.854891,13.6730319 C155.282644,13.1855063 155.565886,12.6136457 155.704617,11.9574501 L155.704617,11.9574501 L152.97162,11.7772273 C152.869884,12.0452509 152.721904,12.2716846 152.527681,12.4565284 C152.333458,12.6413722 152.099928,12.7800051 151.82709,12.872427 C151.554253,12.964849 151.25367,13.0110599 150.92534,13.0110599 C150.430533,13.0110599 150.00278,12.9070853 149.64208,12.6991359 C149.28138,12.4911866 149.002762,12.1954365 148.806227,11.8118856 C148.609691,11.4283346 148.511424,10.9731567 148.511424,10.4463518 L148.511424,10.4463518 L148.51136,10.4398083 L155.767046,10.4394201 L155.767046,9.62841782 C155.767046,8.72268305 155.639876,7.9313204 155.385536,7.25432988 C155.131196,6.57733935 154.776276,6.01472094 154.320777,5.56647465 C153.865277,5.11822837 153.333476,4.78204365 152.725372,4.55792051 C152.117269,4.33379736 151.461766,4.22173579 150.758863,4.22173579 C149.713758,4.22173579 148.803915,4.45279058 148.029334,4.91490015 C147.254754,5.37700973 146.654743,6.02165259 146.229302,6.84882873 C145.803861,7.67600486 145.59114,8.63719278 145.59114,9.73239247 C145.59114,10.8553187 145.803861,11.8269041 146.229302,12.6471486 C146.654743,13.4673931 147.26169,14.1004832 148.050144,14.546419 C148.838597,14.9923547 149.780811,15.2153226 150.876784,15.2153226 Z M148.517602,8.55060139 C148.542385,8.19098627 148.63975,7.86055988 148.809695,7.5593222 C149.003918,7.21505056 149.273287,6.94009537 149.617802,6.73445661 C149.962317,6.52881784 150.358856,6.42599846 150.807419,6.42599846 C151.237484,6.42599846 151.615526,6.51957565 151.941543,6.70673003 C152.267561,6.89388441 152.523057,7.1515105 152.708031,7.47960829 C152.893006,7.80770609 152.985493,8.1843254 152.985493,8.60946621 L152.985493,8.60946621 L148.515023,8.60985438 L148.517602,8.55060139 Z M160.346538,15.0073733 L160.346538,8.85207373 C160.351162,8.39458525 160.437869,8.00294739 160.606658,7.67716014 C160.775447,7.35137289 161.01129,7.10298899 161.314186,6.93200845 C161.617081,6.76102791 161.967376,6.67553763 162.365071,6.67553763 C162.95699,6.67553763 163.421738,6.85922619 163.759316,7.2266033 C164.096895,7.59398041 164.263372,8.10345622 164.258747,8.75503072 L164.258747,8.75503072 L164.258747,15.0073733 L167.213714,15.0073733 L167.213714,8.22822581 C167.213714,7.40104967 167.06111,6.68824565 166.755902,6.08981375 C166.450694,5.49138185 166.022941,5.03042755 165.472642,4.70695084 C164.922343,4.38347414 164.277245,4.22173579 163.537347,4.22173579 C162.746581,4.22173579 162.073737,4.4031138 161.518813,4.76586982 C160.96389,5.12862583 160.568507,5.61961726 160.332665,6.23884409 L160.332665,6.23884409 L160.207807,6.23884409 L160.207807,4.36036866 L157.391571,4.36036866 L157.391571,15.0073733 L160.346538,15.0073733 Z M173.258555,15.1576461 L173.492642,15.1529378 C173.876464,15.1390745 174.202481,15.1009505 174.470694,15.0385657 C174.738907,14.9761809 174.947003,14.921883 175.094983,14.875672 L175.094983,14.875672 L174.630234,12.678341 C174.556245,12.6922043 174.449884,12.711844 174.311154,12.73726 C174.172423,12.762676 174.033692,12.775384 173.894961,12.775384 C173.696114,12.775384 173.521544,12.7453469 173.371252,12.6852727 C173.22096,12.6251984 173.104195,12.5200685 173.020957,12.3698829 C172.937718,12.2196973 172.896099,12.0082821 172.896099,11.7356375 L172.896099,11.7356375 L172.895633,6.57860553 L174.90076,6.57849462 L174.90076,4.36036866 L172.895633,4.36070138 L172.896099,1.80952381 L169.941133,1.80952381 L169.940611,4.36070138 L168.484459,4.36036866 L168.484459,6.57849462 L169.940611,6.57860553 L169.941133,12.1238095 C169.936929,12.7581599 170.056933,13.2932141 170.301145,13.728972 L170.378135,13.8567204 C170.674094,14.3142089 171.08913,14.6515489 171.623244,14.8687404 C172.157357,15.0859319 172.78049,15.1806644 173.492642,15.1529378 L173.258555,15.1576461 Z M180.731596,15.2153226 C181.656468,15.2153226 182.473824,15.0686028 183.183664,14.7751632 C183.893503,14.4817236 184.453051,14.0716014 184.862307,13.5447965 C185.271563,13.0179916 185.47619,12.4056964 185.47619,11.7079109 C185.47619,10.940809 185.221851,10.3215822 184.713171,9.85023041 C184.204491,9.37887865 183.432223,9.03691756 182.396366,8.82434716 L182.396366,8.82434716 L180.468008,8.43617512 C179.973201,8.32988991 179.624062,8.18894649 179.42059,8.01334485 C179.217118,7.83774322 179.115382,7.62286226 179.115382,7.368702 C179.115382,7.04984639 179.272611,6.79453085 179.587067,6.60275538 C179.901524,6.4109799 180.287658,6.31509217 180.745469,6.31509217 C181.087672,6.31509217 181.382475,6.37170059 181.629878,6.48491743 C181.877282,6.59813428 182.077285,6.74831989 182.229889,6.93547427 C182.382493,7.12262865 182.481917,7.33173323 182.52816,7.56278802 L182.52816,7.56278802 L185.233412,7.39642857 C185.103929,6.41675627 184.651898,5.64272273 183.877318,5.07432796 C183.102737,4.50593318 182.042603,4.22173579 180.696914,4.22173579 C179.785915,4.22173579 178.991681,4.35574757 178.314212,4.62377112 C177.636743,4.89179467 177.111878,5.27303507 176.739617,5.76749232 C176.367356,6.26194956 176.181225,6.85113927 176.181225,7.53506144 C176.181225,8.32988991 176.434409,8.98377496 176.940777,9.49671659 C177.447144,10.0096582 178.220568,10.3701037 179.26105,10.578053 L179.26105,10.578053 L181.10617,10.9454301 C181.568606,11.037852 181.910808,11.1707085 182.132778,11.3439996 C182.354747,11.5172907 182.468044,11.737948 182.472668,12.0059716 C182.468044,12.3248272 182.307347,12.5847638 181.990579,12.7857815 C181.67381,12.9867992 181.256461,13.087308 180.738533,13.087308 C180.211356,13.087308 179.778978,12.9752464 179.4414,12.7511233 C179.103821,12.5270001 178.891101,12.2000576 178.803238,11.7702957 L178.803238,11.7702957 L175.896827,11.9227919 C176.040182,12.9394329 176.529209,13.7423483 177.363906,14.331538 C178.198603,14.9207277 179.321166,15.2153226 180.731596,15.2153226 Z"
                                    id="components" fill="#2D3747"/>
                            </g>
                            <g id="leaf-(1)" transform="translate(16.518219, 18.000000) rotate(18.000000) translate(-16.518219, -18.000000) translate(4.858300, 2.918919)" fill="#0ED3CF">
                                <path
                                    d="M16.5760536,0.474354511 C16.5760536,0.474354511 25.4090458,11.3491047 21.6422669,22.163638 C19.338752,28.7734916 12.6340898,29.776027 7.97799644,29.6376923 C8.38527124,25.9331271 9.40986583,22.7792677 11.0508657,20.176385 C12.3684857,20.3998224 14.3457354,19.9312857 16.9826148,18.7707747 C14.4868724,19.3547151 12.6790865,19.4905083 11.5592573,19.1781542 L11.5592573,19.1781542 L11.7028099,19.2136718 C13.2608089,17.076071 15.2822942,15.3514936 17.7672658,14.0399398 C14.6535818,14.7584678 12.0929072,16.2289107 10.0864045,18.4537674 C9.30581083,17.927787 8.44168374,17.1512382 7.49402322,16.124121 C8.03119669,17.5633575 8.65794495,18.6224628 9.37397416,19.2997098 C7.39789448,21.8389372 6.03769452,25.215563 5.2933743,29.4295873 C5.22285537,29.4223962 5.15327768,29.4136267 5.08521332,29.4048249 C4.20764183,29.3150292 3.49492575,28.8333342 2.77883163,28.0154909 C-2.87631569,20.2248285 1.82807546,13.3221315 7.94518385,11.0202862 C19.2027606,6.78287572 16.5760536,0.474354511 16.5760536,0.474354511 Z"
                                    id="Combined-Shape"/>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <p>
                Welcome to TailwindComponents Browser Mockup.
            </p>
            <p class="text-gray-500 italic m-3">
                Be excellent to eachother.
            </p>
        </div>
    </div>

How to create a Browser Frame Mockup with Tailwind CSS?

To create a Browser Frame Mockup UI component with Tailwind CSS, follow these steps:

  1. Create a new HTML file and add the basic structure of the Browser Frame Mockup UI component. This should include a div element for the browser window, a div element for the URL bar, and a div element for the content area.

  2. Add the necessary Tailwind CSS classes to the HTML elements to style the component. This may include classes for the background color, border, and padding.

  3. Use CSS to add additional styling to the component, such as the navigation buttons and the URL bar.

  4. Test the component to ensure that it works as expected.

Conclusion

In this article, we have explored how to use Tailwind CSS to create a Browser Frame Mockup UI component. By using Tailwind CSS, you can quickly and easily create custom user interfaces without having to spend too much time on styling. With the steps outlined above, you can create a Browser Frame Mockup UI component that is both functional and visually appealing.