built with tailwindcss and Uikit framework

#### Open File

You can view the code inside the file by opening it.

#### Style.css

    /* ========================================================================
        Table Contents
      ==========================================================================

      -on/Off switch
      -ripple effect
      -Slider
      -Slideshow
      -Transform Origin
      -Animation
      -Transitions
      -Simplebar

    */

    [hidden] {
      display: none !important;
    }

     /* ========================================================================
      On/Off Switch
     ========================================================================== */

    .switch-button {
      position: relative;
      display: inline-block;
      width: 34px;
      height: 20px;
      cursor: pointer;
      border-radius: 50px;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      margin: 0 7px 0 0;
      top: 4px;
      position: absolute;
      top: 2px;
      left: 0;
    }

    .switch input {
      display: none;
    }

    .switch.interactive-effect input:checked + .switch-button:before {
      -webkit-animation: switch-shadow-color 0.4s;
      animation: switch-shadow-color 0.4s;
    }

    .switch.interactive-effect .switch-button:before {
      -webkit-animation: switch-shadow 0.4s;
      animation: switch-shadow 0.4s;
    }

    @-webkit-keyframes switch-shadow {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
      }
      100% {
        -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
        box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
      }
    }

    @keyframes switch-shadow {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
      }
      100% {
        -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
        box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
      }
    }

    @-webkit-keyframes switch-shadow-color {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
        box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
      }
      100% {
        -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
        box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
      }
    }

    @keyframes switch-shadow-color {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
        box-shadow: 0 0 0 0 rgba(42, 65, 232, 0.6);
      }
      100% {
        -webkit-box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
        box-shadow: 0 0 0px 10px rgba(0, 0, 0, 0);
      }
    }

    .switch-button:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      bottom: 2px;
      left: 2px;
      -webkit-transition: 0.4s, -webkit-box-shadow 0.3s;
      transition: 0.4s, -webkit-box-shadow 0.3s;
      transition: 0.4s, box-shadow 0.3s;
      transition: 0.4s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
      border-radius: 50px;
    }

    input:checked + .switch-button:before {
      -webkit-transform: translateX(14px);
      transform: translateX(14px);
    }

    /* ========================================================================
       Ripple Effect
     ========================================================================== */

    .ripple-effect-dark {
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .ripple-effect {
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .ripple-effect span.ripple-overlay {
      -webkit-animation: ripple 0.9s;
      animation: ripple 0.9s;
      border-radius: 100%;
      background: #fff;
      height: 12px;
      position: absolute;
      width: 12px;
      line-height: 12px;
      opacity: 0.1;
      pointer-events: none;
    }

    .ripple-effect-dark span.ripple-overlay {
      -webkit-animation: ripple 0.9s;
      animation: ripple 0.9s;
      border-radius: 100%;
      background: #fff;
      height: 12px;
      position: absolute;
      width: 12px;
      line-height: 12px;
      opacity: 0.1;
      pointer-events: none;
      background: #000;
      opacity: 0.07;
    }

    @-webkit-keyframes ripple {
      0% {
        -webkit-transform: scale(4);
        transform: scale(4);
      }
      100% {
        opacity: 0;
        -webkit-transform: scale(40);
        transform: scale(40);
      }
    }

    @keyframes ripple {
      0% {
        -webkit-transform: scale(4);
        transform: scale(4);
      }
      100% {
        opacity: 0;
        -webkit-transform: scale(40);
        transform: scale(40);
      }
    }

    /* ========================================================================
        Component: modal
    ========================================================================== */
    .uk-modal {
      -webkit-overflow-scrolling: touch;
      transition: opacity 0.15s linear;
    }
    .uk-modal-dialog {
      transition: 0.3s linear;
      transition-property: opacity, transform;
      box-sizing: border-box;
    }

    /* ========================================================================
        Component: Slider and Slideshow
     ========================================================================== */
    /*  Prevent tab highlighting on iOS. */
    .uk-slider , .uk-slideshow {
      -webkit-tap-highlight-color: transparent;
    }
    .uk-slider-items , .uk-slideshow-items{
      touch-action: pan-y;
    }
    /*  Prevent displaying the callout information on iOS.*/
    .uk-slider-items , .uk-slideshow-items {
      -webkit-touch-callout: none;
    }

    /* ========================================================================
        Component: Slideshow
    ========================================================================== */
    /* Optimize animation */
    .uk-slideshow-items > * {
      will-change: transform, opacity;
    }

    /* Transform Origin
    ========================================================================== */
    .uk-transform-origin-top-left {
      transform-origin: 0 0;
    }
    .uk-transform-origin-top-center {
      transform-origin: 50% 0;
    }
    .uk-transform-origin-top-right {
      transform-origin: 100% 0;
    }
    .uk-transform-origin-center-left {
      transform-origin: 0 50%;
    }
    .uk-transform-origin-center-right {
      transform-origin: 100% 50%;
    }
    .uk-transform-origin-bottom-left {
      transform-origin: 0 100%;
    }
    .uk-transform-origin-bottom-center {
      transform-origin: 50% 100%;
    }
    .uk-transform-origin-bottom-right {
      transform-origin: 100% 100%;
    }

    .....

#### Uikit.js

    /*! UIkit 3.2.1 | http://www.getuikit.com | (c) 2014 - 2019 YOOtheme | MIT License */

    (function (global, factory) {
        typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define('uikit', factory) :
        (global = global || self, global.UIkit = factory());
    }(this, function () { 'use strict';

        var objPrototype = Object.prototype;
        var hasOwnProperty = objPrototype.hasOwnProperty;

        function hasOwn(obj, key) {
            return hasOwnProperty.call(obj, key);
        }

        var hyphenateCache = {};
        var hyphenateRe = /([a-z\d])([A-Z])/g;

        function hyphenate(str) {

            if (!(str in hyphenateCache)) {
                hyphenateCache[str] = str
                    .replace(hyphenateRe, '$1-$2')
                    .toLowerCase();
            }

            return hyphenateCache[str];
        }

        var camelizeRe = /-(\w)/g;

        function camelize(str) {
            return str.replace(camelizeRe, toUpper);
        }

        function toUpper(_, c) {
            return c ? c.toUpperCase() : '';
        }

        function ucfirst(str) {
            return str.length ? toUpper(null, str.charAt(0)) + str.slice(1) : '';
        }

        var strPrototype = String.prototype;
        var startsWithFn = strPrototype.startsWith || function (search) { return this.lastIndexOf(search, 0) === 0; };

        function startsWith(str, search) {
            return startsWithFn.call(str, search);
        }

        var endsWithFn = strPrototype.endsWith || function (search) { return this.substr(-search.length) === search; };

        function endsWith(str, search) {
            return endsWithFn.call(str, search);
        }

        var arrPrototype = Array.prototype;

        var includesFn = function (search, i) { return ~this.indexOf(search, i); };
        var includesStr = strPrototype.includes || includesFn;
        var includesArray = arrPrototype.includes || includesFn;

        function includes(obj, search) {
            return obj && (isString(obj) ? includesStr : includesArray).call(obj, search);
        }

        var findIndexFn = arrPrototype.findIndex || function (predicate) {
            var arguments$1 = arguments;

            for (var i = 0; i < this.length; i++) {
                if (predicate.call(arguments$1[1], this[i], i, this)) {
                    return i;
                }
            }
            return -1;
        };

        function findIndex(array, predicate) {
            return findIndexFn.call(array, predicate);
        }

        var isArray = Array.isArray;

        function isFunction(obj) {
            return typeof obj === 'function';
        }

        function isObject(obj) {
            return obj !== null && typeof obj === 'object';
        }

        var toString = objPrototype.toString;
        function isPlainObject(obj) {
            return toString.call(obj) === '[object Object]';
        }

        function isWindow(obj) {
            return isObject(obj) && obj === obj.window;
        }

        function isDocument(obj) {
            return isObject(obj) && obj.nodeType === 9;
        }

        function isJQuery(obj) {
            return isObject(obj) && !!obj.jquery;
        }

        function isNode(obj) {
            return obj instanceof Node || isObject(obj) && obj.nodeType >= 1;
        }

        function isNodeCollection(obj) {
            return toString.call(obj).match(/^\[object (NodeList|HTMLCollection)\]$/);
        }

        function isBoolean(value) {
            return typeof value === 'boolean';
        }

        function isString(value) {
            return typeof value === 'string';
        }

        function isNumber(value) {
            return typeof value === 'number';
        }

        function isNumeric(value) {
            return isNumber(value) || isString(value) && !isNaN(value - parseFloat(value));
        }

        function isEmpty(obj) {
            return !(isArray(obj)
                ? obj.length
                : isObject(obj)
                    ? Object.keys(obj).length
                    : false
            );
        }

        function isUndefined(value) {
            return value === void 0;
        }

        function toBoolean(value) {
            return isBoolean(value)
                ? value
                : value === 'true' || value === '1' || value === ''
                    ? true
                    : value === 'false' || value === '0'
                        ? false
                        : value;
        }

        function toNumber(value) {
            var number = Number(value);
            return !isNaN(number) ? number : false;
        }

        function toFloat(value) {
            return parseFloat(value) || 0;
        }

        function toNode(element) {
            return isNode(element) || isWindow(element) || isDocument(element)
                ? element
                : isNodeCollection(element) || isJQuery(element)
                    ? element[0]
                    : isArray(element)
                        ? toNode(element[0])
                        : null;
        }

        function toNodes(element) {
            return isNode(element)
                ? [element]
                : isNodeCollection(element)
                    ? arrPrototype.slice.call(element)
                    : isArray(element)
                        ? element.map(toNode).filter(Boolean)
                        : isJQuery(element)
                            ? element.toArray()
                            : [];
        }

        function toList(value) {
            return isArray(value)
                ? value
                : isString(value)
                    ? value.split(/,(?![^(]*\))/).map(function (value) { return isNumeric(value)
                        ? toNumber(value)
                        : toBoolean(value.trim()); })
                    : [value];
        }

        function toMs(time) {
            return !time
                ? 0
                : endsWith(time, 'ms')
                    ? toFloat(time)
                    : toFloat(time) * 1000;
        }

        function isEqual(value, other) {
            return value === other
                || isObject(value)
                && isObject(other)
                && Object.keys(value).length === Object.keys(other).length
                && each(value, function (val, key) { return val === other[key]; });
        }

        function swap(value, a, b) {
            return value.replace(new RegExp((a + "|" + b), 'mg'), function (match) {
                return match === a ? b : a;
            });
        }

        var assign = Object.assign || function (target) {
            var args = [], len = arguments.length - 1;
            while ( len-- > 0 ) args[ len ] = arguments[ len + 1 ];

            target = Object(target);
            for (var i = 0; i < args.length; i++) {
                var source = args[i];
                if (source !== null) {
                    for (var key in source) {
                        if (hasOwn(source, key)) {
                            target[key] = source[key];
                        }
                    }
                }
            }
            return target;
        };

        function last(array) {
            return array[array.length - 1];
        }

        function each(obj, cb) {
            for (var key in obj) {
                if (false === cb(obj[key], key)) {
                    return false;
                }
            }
            return true;
        }

        function sortBy(array, prop) {
            return array.sort(function (ref, ref$1) {
                    var propA = ref[prop]; if ( propA === void 0 ) propA = 0;
                    var propB = ref$1[prop]; if ( propB === void 0 ) propB = 0;

                    return propA > propB
                    ? 1
                    : propB > propA
                        ? -1
                        : 0;
            }
            );
        }

        function uniqueBy(array, prop) {
            var seen = new Set();
            return array.filter(function (ref) {
                var check = ref[prop];

                return seen.has(check)
                ? false
                : seen.add(check) || true;
            } // IE 11 does not return the Set object
            );
        }
    }
    .....

#### Script.js

    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark')
        } else {
        document.documentElement.classList.remove('dark')
        }

    // Whenever the user explicitly chooses light mode
    localStorage.theme = 'light'

    // Whenever the user explicitly chooses dark mode
    localStorage.theme = 'dark'

    // Whenever the user explicitly chooses to respect the OS preference
    localStorage.removeItem('theme')

    // add post upload image
    document.getElementById('addPostUrl').addEventListener('change', function(){
    if (this.files[0] ) {
        var picture = new FileReader();
        picture.readAsDataURL(this.files[0]);
        picture.addEventListener('load', function(event) {
        document.getElementById('addPostImage').setAttribute('src', event.target.result);
        document.getElementById('addPostImage').style.display = 'block';
        });
    }
    });

    // Create Status upload image
    document.getElementById('createStatusUrl').addEventListener('change', function(){
    if (this.files[0] ) {
        var picture = new FileReader();
        picture.readAsDataURL(this.files[0]);
        picture.addEventListener('load', function(event) {
        document.getElementById('createStatusImage').setAttribute('src', event.target.result);
        document.getElementById('createStatusImage').style.display = 'block';
        });
    }
    });

    // create product upload image
    document.getElementById('createProductUrl').addEventListener('change', function(){
    if (this.files[0] ) {
        var picture = new FileReader();
        picture.readAsDataURL(this.files[0]);
        picture.addEventListener('load', function(event) {
        document.getElementById('createProductImage').setAttribute('src', event.target.result);
        document.getElementById('createProductImage').style.display = 'block';
        });
    }
    });

#### Sample.html

        Socialite

                ...

#### tailwind.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    /* google font */
    @import url(https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap);

    @layer base {

        :root {
            --w-side:               290px;
            --w-side-md:            240px;
            --w-side-small:         73px;

            --color-primary:        219 39 119;
            --color-primary-soft:   252 231 243;
            --color-secondery:      241 245 249;
            --color-bgbody:         246 249 251;
        }

        html {
            font-family: inter, system-ui, sans-serif;
        }

        /* Basic */
        body {
            @apply text-gray-600 font-normal bg-bgbody dark:bg-dark1 dark:text-white
        }

        body:has(#mood.active) { @apply  overflow-hidden }

        /* Basic */
        input[type='text'],
        input[type='password'],
        input[type='email'],
        input[type='number'],
        input[type='url'],
        input[type='date'],
        select,
        textarea{
            @apply rounded-md py-2 px-4 text-sm font-medium !text-gray-600 dark:!text-white/90 placeholder:!text-gray-600 dark:placeholder:!text-white/90
        }

        input[type='text'],
        input[type='password'],
        input[type='email'],
        input[type='number'],
        input[type='url'],
        input[type='date'],
        input[type='datetime-local'],
        input[type='month'],
        input[type='week'],
        input[type='time'],
        input[type='search'],
        input[type='tel'],
        input[type='checkbox'],
        input[type='radio'],
        select,
        select[multiple],
        textarea {
            @apply bg-slate-100 border-transparent focus:ring-black focus:border-transparent dark:bg-dark3
        }

        select,
        select[multiple]                       {  @apply  focus:!ring-transparent focus:shadow}

        input[type='radio'],
        input[type='checkbox']                 {  @apply !text-sky-600 bg-slate-100 focus:ring-sky-600}

        .switch-button                         { @apply bg-slate-200 dark:bg-slate-800}
        .switch-button:before                  { @apply bg-white dark:bg-sky-600}
        input:checked + .switch-button         { @apply bg-sky-600 dark:bg-blue-300}
        input:checked + .switch-button:before  { @apply dark:bg-sky-600}

        .........
    }

#### tailwind.config.js