<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Components</a>
            </li>
            <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                <span>Timeline</span>
            </li>
        </ul>
        <div class="pt-5 grid grid-cols-1 xl:grid-cols-2 gap-6">
            <!-- Profile -->
            <div class="panel">
                <div class="flex items-center justify-between mb-5">
                    <h5 class="font-semibold text-lg dark:text-white-light">Profile</h5>
                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code1')"
                        ><span class="flex items-center">
                            <icon-code class="me-2" />
                            Code
                        </span></a
                    >
                </div>
                <div class="mb-5">
                    <p class="text-white-dark font-bold mb-5 text-base">Today</p>
                    <div class="sm:flex">
                        <div
                            class="relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block"
                        >
                            <img src="/assets/images/profile-16.jpeg" alt="" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
                        </div>
                        <div class="flex-1">
                            <h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Laurie Fox</h4>
                            <p class="text-center ltr:sm:text-left rtl:sm:text-right">5 sec</p>
                            <div class="mt-4 sm:mt-7 mb-16">
                                <icon-globe class="w-5 h-5 text-white-dark ltr:mr-2.5 rtl:ml-2.5 inline-block align-text-bottom" />

                                <h6 class="inline-block font-bold mb-2 text-lg">Trending Style</h6>
                                <p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                                <div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6">
                                    <img
                                        src="/assets/images/profile-16.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-1.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-2.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/profile-16.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-4.jpg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sm:flex">
                        <div
                            class="relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block"
                        >
                            <img src="/assets/images/profile-7.jpeg" alt="" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
                        </div>
                        <div class="flex-1">
                            <h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Justin Cross</h4>
                            <p class="text-center ltr:sm:text-left rtl:sm:text-right">45 min</p>
                            <div class="mt-4 sm:mt-7 mb-16">
                                <icon-gallery class="text-white-dark ltr:mr-2.5 rtl:ml-2.5 inline-block align-text-bottom" />

                                <h6 class="inline-block font-bold mb-2 text-lg">Nature Photography</h6>
                                <p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                                <div class="ltr:pl-8 rtl:pr-8 grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-8 gap-3 mt-6">
                                    <img
                                        src="/assets/images/drag-1.jpeg"
                                        alt=""
                                        class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/profile-16.jpeg"
                                        alt=""
                                        class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-4.jpg"
                                        alt=""
                                        class="w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sm:flex">
                        <div
                            class="relative mx-auto mb-5 sm:mb-0 ltr:sm:mr-8 rtl:sm:ml-8 z-[2] before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1] dark:before:border-[#191e3a] before:hidden sm:before:block"
                        >
                            <img src="/assets/images/profile-16.jpeg" alt="" class="w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]" />
                        </div>
                        <div class="flex-1">
                            <h4 class="text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right">Laurie Fox</h4>
                            <p class="text-center ltr:sm:text-left rtl:sm:text-right">5 sec</p>
                            <div class="mt-4 sm:mt-7 mb-16">
                                <icon-txt-file class="w-4.5 h-4.5 text-white-dark ltr:mr-2.5 rtl:ml-2.5 inline-block align-text-bottom" />

                                <h6 class="inline-block font-bold mb-2 text-lg">Create new Project</h6>
                                <p class="ltr:pl-8 rtl:pr-8 text-white-dark font-semibold">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                </p>
                                <div class="ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6">
                                    <img
                                        src="/assets/images/profile-16.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-1.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-2.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/profile-16.jpeg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                    <img
                                        src="/assets/images/drag-4.jpg"
                                        alt=""
                                        class="w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <template v-if="codeArr.includes('code1')">
                    <highlight>
                        <pre>
&lt;!-- profile --&gt;
&lt;div class=&quot;mb-5&quot;&gt;
  &lt;p class=&quot;text-white-dark font-bold mb-5 text-base&quot;&gt;Today&lt;/p&gt;
  &lt;div class=&quot;sm:flex&quot;&gt;
    &lt;div
      class=&quot;
        relative
        mx-auto
        mb-5
        sm:mb-0
        ltr:sm:mr-8
        rtl:sm:ml-8
        z-[2]
        before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1]
        dark:before:border-[#191e3a]
        before:hidden
        sm:before:block
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-16.jpeg&quot; alt=&quot;&quot; class=&quot;w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-1&quot;&gt;
      &lt;h4 class=&quot;text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right&quot;&gt;Laurie Fox&lt;/h4&gt;
      &lt;p class=&quot;text-center ltr:sm:text-left rtl:sm:text-right&quot;&gt;5 sec&lt;/p&gt;
      &lt;div class=&quot;mt-4 sm:mt-7 mb-16&quot;&gt;
        &lt;svg&gt; ... &lt;/svg&gt;
        &lt;h6 class=&quot;inline-block font-bold mb-2 text-lg&quot;&gt;Trending Style&lt;/h6&gt;
        &lt;p class=&quot;ltr:pl-8 rtl:pr-8 text-white-dark font-semibold&quot;&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/p&gt;
        &lt;div class=&quot;ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6&quot;&gt;
          &lt;img
            src=&quot;/assets/images/profile-16.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-1.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-2.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/profile-16.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-4.jpg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;sm:flex&quot;&gt;
    &lt;div
      class=&quot;
        relative
        mx-auto
        mb-5
        sm:mb-0
        ltr:sm:mr-8
        rtl:sm:ml-8
        z-[2]
        before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1]
        dark:before:border-[#191e3a]
        before:hidden
        sm:before:block
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-7.jpeg&quot; alt=&quot;&quot; class=&quot;w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-1&quot;&gt;
      &lt;h4 class=&quot;text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right&quot;&gt;Justin Cross&lt;/h4&gt;
      &lt;p class=&quot;text-center ltr:sm:text-left rtl:sm:text-right&quot;&gt;45 min&lt;/p&gt;
      &lt;div class=&quot;mt-4 sm:mt-7 mb-16&quot;&gt;
        &lt;svg&gt; ... &lt;/svg&gt;
        &lt;h6 class=&quot;inline-block font-bold mb-2 text-lg&quot;&gt;Nature Photography&lt;/h6&gt;
        &lt;p class=&quot;ltr:pl-8 rtl:pr-8 text-white-dark font-semibold&quot;&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/p&gt;
        &lt;div class=&quot;ltr:pl-8 rtl:pr-8 grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-8 gap-3 mt-6&quot;&gt;
          &lt;img
            src=&quot;/assets/images/drag-1.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/profile-16.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-4.jpg&quot;
            alt=&quot;&quot;
            class=&quot;w-full rounded-md shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;sm:flex&quot;&gt;
    &lt;div
      class=&quot;
        relative
        mx-auto
        mb-5
        sm:mb-0
        ltr:sm:mr-8
        rtl:sm:ml-8
        z-[2]
        before:absolute before:top-12 before:left-1/2 before:-bottom-[15px] before:-translate-x-1/2 before:border-l-2 before:border-[#ebedf2] before:w-0 before:h-auto before:-z-[1]
        dark:before:border-[#191e3a]
        before:hidden
        sm:before:block
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-16.jpeg&quot; alt=&quot;&quot; class=&quot;w-12 h-12 mx-auto rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)]&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-1&quot;&gt;
      &lt;h4 class=&quot;text-primary text-xl font-bold text-center ltr:sm:text-left rtl:sm:text-right&quot;&gt;Laurie Fox&lt;/h4&gt;
      &lt;p class=&quot;text-center ltr:sm:text-left rtl:sm:text-right&quot;&gt;5 sec&lt;/p&gt;
      &lt;div class=&quot;mt-4 sm:mt-7 mb-16&quot;&gt;
        &lt;svg&gt; ... &lt;/svg&gt;
        &lt;h6 class=&quot;inline-block font-bold mb-2 text-lg&quot;&gt;Create new Project&lt;/h6&gt;
        &lt;p class=&quot;ltr:pl-8 rtl:pr-8 text-white-dark font-semibold&quot;&gt;
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        &lt;/p&gt;
        &lt;div class=&quot;ltr:pl-8 rtl:pr-8 flex space-x-1 rtl:space-x-reverse mt-6&quot;&gt;
          &lt;img
            src=&quot;/assets/images/profile-16.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-1.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-2.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/profile-16.jpeg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
          &lt;img
            src=&quot;/assets/images/drag-4.jpg&quot;
            alt=&quot;&quot;
            class=&quot;w-10 h-10 rounded-full shadow-[0_4px_9px_0_rgba(31,45,61,0.31)] relative top-0 transition-all duration-300 hover:-top-0.5 hover:shadow-none&quot;
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre
                        >
                    </highlight>
                </template>
            </div>
            <!-- Modern -->
            <div class="panel">
                <div class="flex items-center justify-between mb-5">
                    <h5 class="font-semibold text-lg dark:text-white-light">Modern</h5>
                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code2')"
                        ><span class="flex items-center">
                            <icon-code class="me-2" />
                            Code
                        </span></a
                    >
                </div>
                <div class="mb-5 inline-block w-full">
                    <ul
                        class="relative py-12 before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:bottom-0 before:left-1/2 before:top-0 before:w-[3px] before:-ml-[1.5px] max-w-[900px] mx-auto table"
                    >
                        <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
                            <div
                                class="hidden sm:block absolute bg-info border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"
                            ></div>
                            <div
                                class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-left rtl:sm:float-right before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-right-[37px] rtl:before:-left-[37px] before:top-10 sm:before:block before:hidden"
                            >
                                <div>
                                    <img src="/assets/images/carousel1.jpeg" alt="timeline" class="w-full rounded-t-md" />
                                </div>
                                <div class="p-5">
                                    <h4 class="mb-3 text-info text-lg font-semibold">Front-End Framework</h4>
                                    <p class="mb-3 text-white-dark">
                                        Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos
                                        were taken and discover.
                                    </p>
                                    <p><button type="button" class="btn btn-info">Read more</button></p>
                                </div>
                            </div>
                        </li>
                        <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
                            <div
                                class="hidden sm:block absolute bg-primary border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"
                            ></div>
                            <div
                                class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-right rtl:sm:float-left before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-left-[37px] rtl:before:-right-[37px] before:top-10 sm:before:block before:hidden"
                            >
                                <div>
                                    <img src="/assets/images/menu-heade.jpg" alt="timeline" class="w-full rounded-t-md" />
                                </div>
                                <div class="p-5">
                                    <h4 class="mb-3 text-primary text-lg font-semibold">Web Development</h4>
                                    <p class="mb-3 text-white-dark">
                                        Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos
                                        were taken and discover.
                                    </p>
                                    <p><button type="button" class="btn btn-primary">Read more</button></p>
                                </div>
                            </div>
                        </li>
                        <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
                            <div
                                class="hidden sm:block absolute bg-success border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"
                            ></div>
                            <div
                                class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-left rtl:sm:float-right before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-right-[37px] rtl:before:-left-[37px] before:top-10 sm:before:block before:hidden"
                            >
                                <div>
                                    <img src="/assets/images/carousel1.jpeg" alt="timeline" class="w-full rounded-t-md" />
                                </div>
                                <div class="p-5">
                                    <h4 class="mb-3 text-success text-lg font-semibold">Theme Development</h4>
                                    <p class="mb-3 text-white-dark">
                                        Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos
                                        were taken and discover.
                                    </p>
                                    <p><button type="button" class="btn btn-success">Read more</button></p>
                                </div>
                            </div>
                        </li>
                        <li class="relative mb-12 before:clear-both before:table after:clear-both after:table">
                            <div
                                class="hidden sm:block absolute bg-danger border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]"
                            ></div>
                            <div
                                class="relative border border-[#ebedf2] dark:border-[#191e3a] max-w-[320px] mx-auto sm:max-w-full w-full sm:w-[46%] shadow-[0_20px_20px_rgba(126,142,177,0.12)] rounded-md bg-white dark:bg-[#191e3a] ltr:sm:float-right rtl:sm:float-left before:absolute before:bg-[#ebedf2] dark:before:bg-[#191e3a] before:w-[37px] before:h-[3px] before:rounded-full ltr:before:-left-[37px] rtl:before:-right-[37px] before:top-10 sm:before:block before:hidden"
                            >
                                <div>
                                    <img src="/assets/images/menu-heade.jpg" alt="timeline" class="w-full rounded-t-md" />
                                </div>
                                <div class="p-5">
                                    <h4 class="mb-3 text-danger text-lg font-semibold">Plugin Development</h4>
                                    <p class="mb-3 text-white-dark">
                                        Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos
                                        were taken and discover.
                                    </p>
                                    <p><button type="button" class="btn btn-danger">Read more</button></p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <template v-if="codeArr.includes('code2')">
                    <highlight>
                        <pre>
&lt;!-- modern --&gt;
&lt;ul
  class=&quot;
    relative
    py-12
    before:absolute before:bg-[#ebedf2]
    dark:before:bg-[#191e3a]
    before:bottom-0 before:left-1/2 before:top-0 before:w-[3px] before:-ml-[1.5px]
    max-w-[900px]
    mx-auto
    table
  &quot;
&gt;
  &lt;li class=&quot;relative mb-12 before:clear-both before:table after:clear-both after:table&quot;&gt;
    &lt;div class=&quot;hidden sm:block absolute bg-info border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]&quot;&gt;&lt;/div&gt;
    &lt;div
      class=&quot;
        relative
        border border-[#ebedf2]
        dark:border-[#191e3a]
        max-w-[320px]
        mx-auto
        sm:max-w-full
        w-full
        sm:w-[46%]
        shadow-[0_20px_20px_rgba(126,142,177,0.12)]
        rounded-md
        bg-white
        dark:bg-[#191e3a]
        ltr:sm:float-left
        rtl:sm:float-right
        before:absolute before:bg-[#ebedf2]
        dark:before:bg-[#191e3a]
        before:w-[37px] before:h-[3px] before:rounded-full
        ltr:before:-right-[37px]
        rtl:before:-left-[37px]
        before:top-10
        sm:before:block
        before:hidden
      &quot;
    &gt;
      &lt;div&gt;
        &lt;img src=&quot;/assets/images/carousel1.jpeg&quot; alt=&quot;timeline&quot; class=&quot;w-full rounded-t-md&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;p-5&quot;&gt;
        &lt;h4 class=&quot;mb-3 text-info text-lg font-semibold&quot;&gt;Front-End Framework&lt;/h4&gt;
        &lt;p class=&quot;mb-3 text-white-dark&quot;&gt;Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.&lt;/p&gt;
        &lt;p&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Read more&lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class=&quot;relative mb-12 before:clear-both before:table after:clear-both after:table&quot;&gt;
    &lt;div class=&quot;hidden sm:block absolute bg-primary border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]&quot;&gt;&lt;/div&gt;
    &lt;div
      class=&quot;
        relative
        border border-[#ebedf2]
        dark:border-[#191e3a]
        max-w-[320px]
        mx-auto
        sm:max-w-full
        w-full
        sm:w-[46%]
        shadow-[0_20px_20px_rgba(126,142,177,0.12)]
        rounded-md
        bg-white
        dark:bg-[#191e3a]
        ltr:sm:float-right
        rtl:sm:float-left
        before:absolute before:bg-[#ebedf2]
        dark:before:bg-[#191e3a]
        before:w-[37px] before:h-[3px] before:rounded-full
        ltr:before:-left-[37px]
        rtl:before:-right-[37px]
        before:top-10
        sm:before:block
        before:hidden
      &quot;
    &gt;
      &lt;div&gt;
        &lt;img src=&quot;/assets/images/menu-heade.jpg&quot; alt=&quot;timeline&quot; class=&quot;w-full rounded-t-md&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;p-5&quot;&gt;
        &lt;h4 class=&quot;mb-3 text-primary text-lg font-semibold&quot;&gt;Web Development&lt;/h4&gt;
        &lt;p class=&quot;mb-3 text-white-dark&quot;&gt;Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.&lt;/p&gt;
        &lt;p&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Read more&lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class=&quot;relative mb-12 before:clear-both before:table after:clear-both after:table&quot;&gt;
    &lt;div class=&quot;hidden sm:block absolute bg-success border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]&quot;&gt;&lt;/div&gt;
    &lt;div
      class=&quot;
        relative
        border border-[#ebedf2]
        dark:border-[#191e3a]
        max-w-[320px]
        mx-auto
        sm:max-w-full
        w-full
        sm:w-[46%]
        shadow-[0_20px_20px_rgba(126,142,177,0.12)]
        rounded-md
        bg-white
        dark:bg-[#191e3a]
        ltr:sm:float-left
        rtl:sm:float-right
        before:absolute before:bg-[#ebedf2]
        dark:before:bg-[#191e3a]
        before:w-[37px] before:h-[3px] before:rounded-full
        ltr:before:-right-[37px]
        rtl:before:-left-[37px]
        before:top-10
        sm:before:block
        before:hidden
      &quot;
    &gt;
      &lt;div&gt;
        &lt;img src=&quot;/assets/images/carousel1.jpeg&quot; alt=&quot;timeline&quot; class=&quot;w-full rounded-t-md&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;p-5&quot;&gt;
        &lt;h4 class=&quot;mb-3 text-success text-lg font-semibold&quot;&gt;Theme Development&lt;/h4&gt;
        &lt;p class=&quot;mb-3 text-white-dark&quot;&gt;Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.&lt;/p&gt;
        &lt;p&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Read more&lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class=&quot;relative mb-12 before:clear-both before:table after:clear-both after:table&quot;&gt;
    &lt;div class=&quot;hidden sm:block absolute bg-danger border-[3px] border-[#ebedf2] dark:border-[#191e3a] w-5 h-5 rounded-full left-1/2 top-[32px] -ml-2.5 z-[1]&quot;&gt;&lt;/div&gt;
    &lt;div
      class=&quot;
        relative
        border border-[#ebedf2]
        dark:border-[#191e3a]
        max-w-[320px]
        mx-auto
        sm:max-w-full
        w-full
        sm:w-[46%]
        shadow-[0_20px_20px_rgba(126,142,177,0.12)]
        rounded-md
        bg-white
        dark:bg-[#191e3a]
        ltr:sm:float-right
        rtl:sm:float-left
        before:absolute before:bg-[#ebedf2]
        dark:before:bg-[#191e3a]
        before:w-[37px] before:h-[3px] before:rounded-full
        ltr:before:-left-[37px]
        rtl:before:-right-[37px]
        before:top-10
        sm:before:block
        before:hidden
      &quot;
    &gt;
      &lt;div&gt;
        &lt;img src=&quot;/assets/images/menu-heade.jpg&quot; alt=&quot;timeline&quot; class=&quot;w-full rounded-t-md&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;p-5&quot;&gt;
        &lt;h4 class=&quot;mb-3 text-danger text-lg font-semibold&quot;&gt;Plugin Development&lt;/h4&gt;
        &lt;p class=&quot;mb-3 text-white-dark&quot;&gt;Map where your photos were taken and discover local points of interest. Map where your photos. Map where your photos were taken and discover.&lt;/p&gt;
        &lt;p&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Read more&lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</pre
                        >
                    </highlight>
                </template>
            </div>
            <!-- Basic -->
            <div class="panel">
                <div class="flex items-center justify-between mb-5">
                    <h5 class="font-semibold text-lg dark:text-white-light">Basic</h5>
                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code3')"
                        ><span class="flex items-center">
                            <icon-code class="me-2" />
                            Code
                        </span></a
                    >
                </div>
                <div class="mb-5">
                    <div class="max-w-[900px] mx-auto">
                        <div class="flex">
                            <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">10:00</p>
                            <div
                                class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-primary before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-primary after:rounded-full"
                            ></div>
                            <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
                                <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Updated Server Logs</p>
                                <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">25 mins ago</p>
                            </div>
                        </div>
                        <div class="flex">
                            <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">12:45</p>
                            <div
                                class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-secondary before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-secondary after:rounded-full"
                            ></div>
                            <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
                                <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Backup Files EOD</p>
                                <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">2 hrs ago</p>
                            </div>
                        </div>
                        <div class="flex">
                            <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">14:00</p>
                            <div
                                class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-success before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-success after:rounded-full"
                            ></div>
                            <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
                                <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Send Mail to HR and Admin</p>
                                <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">4 hrs ago</p>
                            </div>
                        </div>
                        <div class="flex">
                            <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p>
                            <div
                                class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-danger before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-danger after:rounded-full"
                            ></div>
                            <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
                                <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Conference call with Marketing Manager.</p>
                                <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">6 hrs ago</p>
                            </div>
                        </div>
                        <div class="flex">
                            <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">17:00</p>
                            <div
                                class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-warning before:rounded-full after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-warning after:rounded-full"
                            ></div>
                            <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
                                <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">
                                    Collected documents from <a href="javascript:void(0);">Sara</a>
                                </p>
                                <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">9 hrs ago</p>
                            </div>
                        </div>
                        <div class="flex">
                            <p class="text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5">16:00</p>
                            <div
                                class="relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-info before:rounded-full"
                            ></div>
                            <div class="p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5">
                                <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]">Server rebooted successfully</p>
                                <p class="text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]">8 hrs ago</p>
                            </div>
                        </div>
                    </div>
                </div>
                <template v-if="codeArr.includes('code3')">
                    <highlight>
                        <pre>
&lt;!-- basic --&gt;
&lt;div class=&quot;max-w-[900px] mx-auto&quot;&gt;
  &lt;div class=&quot;flex&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5&quot;&gt;10:00&lt;/p&gt;
    &lt;div
      class=&quot;
        relative
        before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-primary before:rounded-full
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-primary after:rounded-full
      &quot;
    &gt;&lt;/div&gt;
    &lt;div class=&quot;p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5&quot;&gt;
      &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]&quot;&gt;Updated Server Logs&lt;/p&gt;
      &lt;p class=&quot;text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]&quot;&gt;25 mins ago&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flex&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5&quot;&gt;12:45&lt;/p&gt;
    &lt;div
      class=&quot;
        relative
        before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-secondary before:rounded-full
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-secondary after:rounded-full
      &quot;
    &gt;&lt;/div&gt;
    &lt;div class=&quot;p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5&quot;&gt;
      &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]&quot;&gt;Backup Files EOD&lt;/p&gt;
      &lt;p class=&quot;text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]&quot;&gt;2 hrs ago&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flex&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5&quot;&gt;14:00&lt;/p&gt;
    &lt;div
      class=&quot;
        relative
        before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-success before:rounded-full
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-success after:rounded-full
      &quot;
    &gt;&lt;/div&gt;
    &lt;div class=&quot;p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5&quot;&gt;
      &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]&quot;&gt;Send Mail to HR and Admin&lt;/p&gt;
      &lt;p class=&quot;text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]&quot;&gt;4 hrs ago&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flex&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5&quot;&gt;16:00&lt;/p&gt;
    &lt;div
      class=&quot;
        relative
        before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-danger before:rounded-full
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-danger after:rounded-full
      &quot;
    &gt;&lt;/div&gt;
    &lt;div class=&quot;p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5&quot;&gt;
      &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]&quot;&gt;Conference call with Marketing Manager.&lt;/p&gt;
      &lt;p class=&quot;text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]&quot;&gt;6 hrs ago&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flex&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5&quot;&gt;17:00&lt;/p&gt;
    &lt;div
      class=&quot;
        relative
        before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-warning before:rounded-full
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-warning after:rounded-full
      &quot;
    &gt;&lt;/div&gt;
    &lt;div class=&quot;p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5&quot;&gt;
      &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]&quot;&gt;Collected documents from &lt;a href=&quot;javascript:void(0);&quot;&gt;Sara&lt;/a&gt;&lt;/p&gt;
      &lt;p class=&quot;text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]&quot;&gt;9 hrs ago&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;flex&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light min-w-[58px] max-w-[100px] text-base font-semibold py-2.5&quot;&gt;16:00&lt;/p&gt;
    &lt;div class=&quot;relative before:absolute before:left-1/2 before:-translate-x-1/2 before:top-[15px] before:w-2.5 before:h-2.5 before:border-2 before:border-info before:rounded-full&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;p-2.5 self-center ltr:ml-2.5 rtl:ltr:mr-2.5 rtl:ml-2.5&quot;&gt;
      &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px]&quot;&gt;Server rebooted successfully&lt;/p&gt;
      &lt;p class=&quot;text-white-dark text-xs font-bold self-center min-w-[100px] max-w-[100px]&quot;&gt;8 hrs ago&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre
                        >
                    </highlight>
                </template>
            </div>
            <!-- Images -->
            <div class="panel">
                <div class="flex items-center justify-between mb-5">
                    <h5 class="font-semibold text-lg dark:text-white-light">With Images</h5>
                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code4')"
                        ><span class="flex items-center">
                            <icon-code class="me-2" />
                            Code
                        </span></a
                    >
                </div>
                <div class="mb-5">
                    <div class="max-w-[900px] mx-auto text-center ltr:sm:text-left rtl:sm:text-right space-y-3 sm:space-y-0">
                        <div class="sm:flex items-center">
                            <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">09:00</p>
                            <div
                                class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"
                            >
                                <img src="/assets/images/profile-16.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
                            </div>
                            <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">25 mins ago</p>
                            <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Conference call with Marketing Manager.</p>
                        </div>
                        <div class="sm:flex items-center">
                            <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">10:00</p>
                            <div
                                class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"
                            >
                                <img src="/assets/images/profile-1.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
                            </div>
                            <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">2 hrs ago</p>
                            <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Server rebooted successfully</p>
                        </div>
                        <div class="sm:flex items-center">
                            <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">11:00</p>
                            <div
                                class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"
                            >
                                <img src="/assets/images/profile-2.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
                            </div>
                            <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">4 hrs ago</p>
                            <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Backup Files EOD</p>
                        </div>
                        <div class="sm:flex items-center">
                            <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">12:00</p>
                            <div
                                class="p-2.5 relative after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full"
                            >
                                <img src="/assets/images/profile-3.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
                            </div>
                            <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">6 hrs ago</p>
                            <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">Collected documents from Sara</p>
                        </div>
                        <div class="sm:flex items-center">
                            <p class="text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5">01:00</p>
                            <div class="p-2.5 relative">
                                <img src="/assets/images/profile-4.jpeg" alt="" class="w-11 h-11 rounded-full relative z-[1] mx-auto" />
                            </div>
                            <p class="text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0">9 hrs ago</p>
                            <p class="text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5">PDF file Download</p>
                        </div>
                    </div>
                </div>
                <template v-if="codeArr.includes('code4')">
                    <highlight>
                        <pre>
&lt;!-- images --&gt;
&lt;div class=&quot;max-w-[900px] mx-auto text-center ltr:sm:text-left rtl:sm:text-right space-y-3 sm:space-y-0&quot;&gt;
  &lt;div class=&quot;sm:flex items-center&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5&quot;&gt;09:00&lt;/p&gt;
    &lt;div
      class=&quot;
        p-2.5
        relative
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-16.jpeg&quot; alt=&quot;&quot; class=&quot;w-11 h-11 rounded-full relative z-[1] mx-auto&quot; /&gt;
    &lt;/div&gt;
    &lt;p class=&quot;text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0&quot;&gt;25 mins ago&lt;/p&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5&quot;&gt;Conference call with Marketing Manager.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;sm:flex items-center&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5&quot;&gt;10:00&lt;/p&gt;
    &lt;div
      class=&quot;
        p-2.5
        relative
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-1.jpeg&quot; alt=&quot;&quot; class=&quot;w-11 h-11 rounded-full relative z-[1] mx-auto&quot; /&gt;
    &lt;/div&gt;
    &lt;p class=&quot;text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0&quot;&gt;2 hrs ago&lt;/p&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5&quot;&gt;Server rebooted successfully&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;sm:flex items-center&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5&quot;&gt;11:00&lt;/p&gt;
    &lt;div
      class=&quot;
        p-2.5
        relative
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-2.jpeg&quot; alt=&quot;&quot; class=&quot;w-11 h-11 rounded-full relative z-[1] mx-auto&quot; /&gt;
    &lt;/div&gt;
    &lt;p class=&quot;text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0&quot;&gt;4 hrs ago&lt;/p&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5&quot;&gt;Backup Files EOD&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;sm:flex items-center&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5&quot;&gt;12:00&lt;/p&gt;
    &lt;div
      class=&quot;
        p-2.5
        relative
        after:absolute after:left-1/2 after:-translate-x-1/2 after:top-[25px] after:-bottom-[15px] after:w-0 after:h-auto after:border-l-2 after:border-white-dark/20 after:rounded-full
      &quot;
    &gt;
      &lt;img src=&quot;/assets/images/profile-3.jpeg&quot; alt=&quot;&quot; class=&quot;w-11 h-11 rounded-full relative z-[1] mx-auto&quot; /&gt;
    &lt;/div&gt;
    &lt;p class=&quot;text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0&quot;&gt;6 hrs ago&lt;/p&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5&quot;&gt;Collected documents from Sara&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;sm:flex items-center&quot;&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light text-base font-semibold p-2.5&quot;&gt;01:00&lt;/p&gt;
    &lt;div class=&quot;p-2.5 relative&quot;&gt;
      &lt;img src=&quot;/assets/images/profile-4.jpeg&quot; alt=&quot;&quot; class=&quot;w-11 h-11 rounded-full relative z-[1] mx-auto&quot; /&gt;
    &lt;/div&gt;
    &lt;p class=&quot;text-white-dark text-xs font-bold self-center sm:min-w-[100px] sm:max-w-[100px] p-2.5 mt-5 sm:mt-0&quot;&gt;9 hrs ago&lt;/p&gt;
    &lt;p class=&quot;text-[#3b3f5c] dark:text-white-light font-semibold text-[13px] p-2.5&quot;&gt;PDF file Download&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre
                        >
                    </highlight>
                </template>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import highlight from '@/components/plugins/highlight.vue';
    import codePreview from '@/composables/codePreview';
    import { useMeta } from '@/composables/use-meta';

    import IconCode from '@/components/icon/icon-code.vue';
    import IconGlobe from '@/components/icon/icon-globe.vue';
    import IconGallery from '@/components/icon/icon-gallery.vue';
    import IconTxtFile from '@/components/icon/icon-txt-file.vue';

    useMeta({ title: 'Timeline' });

    const { codeArr, toggleCode } = codePreview();
</script>
