DEV Community: Fazail Alam

A quick guide for filament v3 setup and running

Fazail Alam — Sun, 08 Oct 2023 05:08:04 +0000

💡

Filament v3 requirements: PHP 8.1+, Laravel v10.0+, Livewire v3.0+

Why this?

Some devs might be in a hurry or want to take a quick look at what Filament is and what it is used for.

Please note this guide is for new projects don't follow this guide on existing project

Let's get started 😊

After you have finished a fresh Laravel and livewire project installation you can continue to add filament to your project

composer require filament/filament:"^3.0-stable" -W
php artisan filament:install --panels

The first command will install Filament and the second will install and set Filamnet's Panel to your project and a file will be added to the Providers Directory -

app/Providers/Filament/AdminPanelProvider.php

I assume that you have already connected your project to a database. After the admin panel has been setuped let's create an admin user account by running the following command:

php artisan make:filament-user

Follow the instructions and a user will be created, now serve your application on localhost by running the following commands:

php artisan serve


npm run dev
// or 
pnpm dev

After the dev server is up and running head over to the browser and navigate to http://localhost:8000/admin, there you will see a login screen. Enter the credentials you just entered in the terminal while creating a filament user. After successful login, you will be redirected to /admin route.

Official docs in case you want some extra.

Creating a resource 🪄

In filament, resources are like sub-routes under the admin route. With one command you can instantly generate CRUD functionality for the selected Model:

List all records
Editing record
Viewing record
Creating record
Deleting record

I will keep the example similar to filament docs so there will less confusion, Let's create a model named Customer with its migration.

php artisan make:model Customer -m

Update the model and migration files with the below code:

// app/Models/Customer.php
use Illuminate\Database\Eloquent\SoftDeletes;

class Customer extends Model
{
    use HasFactory, SoftDeletes;
    // add for soft delete 👆
    protected $fillable = [
        'name',
        'phone',
        'address',
    ];
}


// database/migrations/xxxx_xx_xx_xxxxxx_create_customers_table.php
return new class extends Migration
{
    public function up(): void
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string("name");
            $table->string("phone");
            $table->text("address");
            $table->softDeletes();
            $table->timestamps();
        });
    }
    ...
};

Now let's generate the resource

php artisan make:filament-resource Customer --generate --soft-deletes

The customer is the name of the resource and will prefix or suffix to its related resource. I have added two flags which are for auto-generating form fields and table columns and for adding soft delete functionality to that resource.

If everything goes right you can see the new item in the sidebar called Customers.

A quick customization to laravel filament navbar

Fazail Alam — Mon, 31 Oct 2022 00:00:00 +0000

Why

I know this is not necessary to write about changing filament navbar but sometimes it’s hard to find where or how i customize it. I have been using filament for a while now and I really like it. It is a great package for creating admin panel in laravel. I have been using it for my personal projects. I have also written a blog post about how to create “custom login page” in filament. So today I am going to write about how to customize filament navbar.

Publish views

First of all, we need to publish filament views. To publish filament views run this command in your terminal.

php artisan vendor:publish --tag=filament-views

Layout

After publishing filament views you will see a new folder in your resources/views. We will be working in layouts folder.

For reference, below is the folder structure.

views
└── vendor
    └── filament
        └── layouts
            ├── app.blade.php
            └── app
                └──topbar
                    └── user-menu.blade.php

Customization

Now Lets start with layouts/app.blade.php. This is the main layout file for filament. To customize the navbar head over to header tag, there you will see custom components like <x-filament::layouts.app.topbar.user-menu />. This is the component for user menu. You can customize it as you want.

// top left navbar items of default filament navbar
<div class="flex items-center justify-between flex-1 gap-4">
    <x-filament::layouts.app.topbar.breadcrumbs :breadcrumbs="$breadcrumbs" />

    @livewire('filament.core.global-search')

    <x-filament::layouts.app.topbar.user-menu />
</div>

Example

Lets create a dark mode toggle button in navbar. There are two files we are going to change. First is layouts/app.blade.php and second is layouts/app/topbar/user-menu.blade.php. Filament comes with built-in support for dark theme. Lets start with enabling dark mode config for filament. Change config/filament.php file and set 'dark_mode' => true, in array.

Add this code in layouts/app.blade.php file. after @livewire('filament.core.global-search') line. And you will see a toggle button in navbar. On click it fire a event called dark-mode-toggled and toggle theme.

// below code is similar to user-menu.blade.php 
// file dark mode implementation
<div>
    @if (config('filament.dark_mode'))
    <div
        x-data="{ 
            mode: null,

            theme: null,

            init: function () {
                this.theme = localStorage.getItem('theme') || (this.isSystemDark() ? 'dark' : 'light')
                this.mode = localStorage.getItem('theme') ? 'manual' : 'auto'

                window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
                    if (this.mode === 'manual') return

                    if (event.matches && (! document.documentElement.classList.contains('dark'))) {
                        this.theme = 'dark'

                        document.documentElement.classList.add('dark')
                    } else if ((! event.matches) && document.documentElement.classList.contains('dark')) {
                        this.theme = 'light'

                        document.documentElement.classList.remove('dark')
                    }
                })

                $watch('theme', () => {
                    if (this.mode === 'auto') return

                    localStorage.setItem('theme', this.theme)

                    if (this.theme === 'dark' && (! document.documentElement.classList.contains('dark'))) {
                        document.documentElement.classList.add('dark')
                    } else if (this.theme === 'light' && document.documentElement.classList.contains('dark')) {
                        document.documentElement.classList.remove('dark')
                    }

                    $dispatch('dark-mode-toggled', this.theme) // dispatch event
                })
            },

            isSystemDark: function () {
                return window.matchMedia('(prefers-color-scheme: dark)').matches
            },
        }"
        x-on:dark-mode-toggled.window="mode = $event.detail"
    >
        <span x-show="theme === 'light'">
            <x-filament::icon-button icon="heroicon-s-moon" x-on:click="mode = 'manual'; theme = 'dark'" />
        </span> 

        <span x-show="theme === 'dark'">
            <x-filament::icon-button icon="heroicon-s-sun" x-on:click="mode = 'manual'; theme = 'light'" />
        </span>
    </div>
    @endif
</div>

Moving to layouts/app/topbar/user-menu.blade.php. Since we have added theme toggler outside of user menu. We need to remove it from user-menu.blade.php. Just remove the below code form that file.

<div>
    @if (config('filament.dark_mode'))
        <x-filament::dropdown.item icon="heroicon-s-moon" x-show="theme === 'dark'" x-on:click="mode = 'manual'; theme = 'light'">
            {{ __('filament::layout.buttons.light_mode.label') }}
        </x-filament::dropdown.item>

        <x-filament::dropdown.item icon="heroicon-s-sun" x-show="theme === 'light'" x-on:click="mode = 'manual'; theme = 'dark'">
            {{ __('filament::layout.buttons.dark_mode.label') }}
        </x-filament::dropdown.item>
    @endif
</div>

Add support for i18n in your nuxt3 application

Fazail Alam — Sat, 13 Aug 2022 00:00:00 +0000

The time i am writing this article, latest nuxt version is -> v3.0.0-rc.8

If you have already a nuxt3 project, then skip this section.

Installation

 npx nuxi init nuxt-i18n

Install dependencies with npm i.

Adding @intlify/nuxt3

Run below command to install @intlify/nuxt3 as dev dependency, then add @intlify/nuxt3 in modules section of nuxt.config.ts.

 npm install --save-dev @intlify/nuxt3

modules: ["@intlify/nuxt3"];

Now add the options for @intlify/nuxt3 below of modules, you can also provide vueI18n options as this package is built on top of vueI18n.

 intlify: {
        localeDir: 'locales', // this the path for languages json files
        vueI18n: {
            // you can add vueI18n option here
        }
    }

Create languages files

Create new directory inside your project's root folder named locales, Note: this name should have to be same as provided in intlify:'locales'. Since this is the directory that this package will look for json files.

Inside those two json files add the languages key and value you want to change.

//en.json
{
    "hello": "Hello {name}!",
    "language": "Language"
}

//fr.json
{
    "hello": "Bonjour, {name}!",
    "language": "Langue"
}

Ready to Test

There is global function that is provided by this package named $t(<key>,{<param>}).

<template>
    <div>
        <h1>{{ $t("hello", { name: "Fazail" }) }}</h1>
        <form>
            <label for="locale-select">{{ $t("language") }} </label>
            <select id="locale-select" v-model="$i18n.locale">
                <option value="en">en</option>
                <option value="fr">fr</option>
            </select>
        </form>
    </div>
</template>

In the above code "hello" is the key, and name is the parameter that will be replaced by the same keyword used inside "{keyword}" Check here more details. Notice we have binded the global $i18n.locale variable with v-model. So whenever we select a new value language will change. Note: select's option value should be same name of the corresponding language file.

How to create plugin in nuxt3

Fazail Alam — Thu, 07 Jul 2022 00:00:00 +0000

In this tutorial, we will learn how to create a plugin in nuxt3. we will use some app hooks to create a plugin. With the help of these hooks, we will create a plugin that will show a progress bar on the top of the page.

Prerequisites

We will use NProgress package to show the bar at the top of page while the page is loading. So lets install it. And make sure to import its css or add a link to its css file.

npm install --save nprogress

<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">

Create a plugin

Now create a folder called /plugins in the root of your project. And create a file called page-progress.js in this folder. You can name the whatever you want. Nuxt provides a helper function to create a plugin called defineNuxtPlugin.

export default defineNuxtPlugin((nuxtApp) => {
    ...
})

Inside this function, we will use the nuxtApp object to access hooks and show/hide the progress bar. We need two hooks i.e. page:start and page:finish.

page:start - This hook will be called when the page starts loading.
page:finish - This hook will be called when the page finishes loading.

First we import NProgress package and then call the NProgress.start() method in page:start hook to start showing the progress bar. And in page:finish hook, we will call the NProgress.done() method to hide the progress bar.

import NProgress from "nprogress";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hooks.hook("page:start", () => {
        NProgress.start();
    });
    nuxtApp.hooks.hook("page:finish", () => {
        NProgress.done();
    });
});

By default NProgress will show spinner at the top-right of the page and to disable it we need pass showSpinner to false.

export default ...
NProgress.configure({ showSpinner: false })
nuxtApp.hooks....

We don't need to register our plugin in the plugins array in the nuxt config because nuxt will automatically register the plugin.

How to customize Laravel filament login page

Fazail Alam — Wed, 06 Jul 2022 00:00:00 +0000

Laravel filament is a set of tools from which you can rapidly build stack application. Currently it has 3 tools, Admin Panel, Form Builder and Table Builder. There are also community plugin to support Laravel filament.

TALL stack

Tall stack is full stack framework for laravel. It stands for T: Tailwindcss , A: Alpinejs , L: Laravel and L: Livewire.

Getting Started

I assume that you have already installed Laravel and Filament. If not than check here for setting up filament. First publish configuration and views of filament.

php artisan vendor:publish --tag=filament-config

php artisan vendor:publish --tag=filament-views

Generated Files:

/
|-- config/
| |-- filament.php
|-- resources/
| |-- views/
| |-- vendor/
| |-- filament/
| ...
| |-- login.blade.php

This will publish filament configuration and views.

Vite setup for filament

The current default bundler for laravel is vitejs, so if you have created a new project then there is greater chance that it came with vite. If it is then we have to register render hook head.end in register method of AppServiceProvider. We need to add @vite directive in order to use the compiled css and js files for our admin panel.

use Filament\Facades\Filament;

public function register()
{
    Filament::registerRenderHook(
        'head.end',
        fn (): string =&gt; Blade::render('@vite([\'resources/css/app.css\',\'resources/js/app.js\'])'),
    );
}

For the icons i am using Iconify, so we need to register cdn script for iconify.

public function boot()
{
    Filament::registerScripts([
        'https://code.iconify.design/2/2.2.1/iconify.min.js',
    ], true); // true means that this script will be load before filament core scripts.
}

We also need to use filament's tailwind configuration otherwise styling of the admin panel will not work. we can use tailwind's presets property to use preset configuration.

module.exports = {
    ...
    presets: [require("./vendor/filament/filament/tailwind.config.js")],
}

Change login class

Since filament uses livewire component to render inputs of login form, we need to create our own class components. Copy the code of vendor/filament/filament/src/Http/Livewire/Auth/Login.php file then create a new file app/Filament/Auth/Login.php and paste the code in it. Next change the namespace of the class to namespace App\Filament\Auth;. Then pass the class into filament config file under auth.pages.login.

//app/Filament/Auth/Login.php
<?php

namespace App\Filament\Auth;

use DanHarrin\LivewireRateLimiting\Exceptions\TooManyRequestsException;
use DanHarrin\LivewireRateLimiting\WithRateLimiting;
use Filament\Facades\Filament;
use Filament\Forms\ComponentContainer;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Http\Responses\Auth\Contracts\LoginResponse;
use Illuminate\Contracts\View\View;
use Livewire\Component;

/**
 * @property ComponentContainer $form
 */
class Login extends Component implements HasForms
{
    use InteractsWithForms;
    use WithRateLimiting;

    public $email = '';
    public $password = '';
    public $remember = false;

    public function mount(): void
    {
        if (Filament::auth()->check()) {
            redirect()->intended(Filament::getUrl());
        }

        $this->form->fill();

    }

    public function authenticate(): ?LoginResponse
    {
        try {
            $this->rateLimit(5);
        } catch (TooManyRequestsException $exception) {
            $this->addError('email', __('filament::login.messages.throttled', [
                'seconds' => $exception->secondsUntilAvailable,
                'minutes' => ceil($exception->secondsUntilAvailable / 60),
            ]));

            return null;
        }

        $data = $this->form->getState();

        if (!Filament::auth()->attempt([
            'email' => $data['email'],
            'password' => $data['password'],
        ], $data['remember'])) {
            $this->addError('email', __('filament::login.messages.failed'));

            return null;
        }

        return app(LoginResponse::class);
    }

    protected function getFormSchema(): array
    {
        return [
            TextInput::make('email')
                ->label(__('filament::login.fields.email.label'))
                ->email()
                ->required()
                ->autocomplete(),
            TextInput::make('password')
                ->label(__('filament::login.fields.password.label'))
                ->password()
                ->required(),
            Checkbox::make('remember')
                ->label(__('filament::login.fields.remember.label')),
        ];
    }

    public function render(): View
    {
        return view('filament::login')
            ->layout('filament::components.layouts.card', [
                'title' => __('filament::login.title'),
            ]);
    }
}

use App\Filament\Auth\Login;

return [
    ...
    'auth' =&gt; [
        'pages' =&gt; [
            'login' =&gt; Login::class,
        ],
    ],
];

Login page

Now lets customize our blade file. This is default blade file for login page.

<form wire:submit.prevent="authenticate" class="space-y-8">
    {{ $this->form }}

    <x-filament::button type="submit" form="authenticate" class="w-full">
        {{ __('filament::login.buttons.submit.label') }}
    </x-filament::button>
</form>

We will add icons for social logins for example facebook, google, etc.

<form wire:submit.prevent="authenticate" class="space-y-8">
    {{ $this->form }}

    <x-filament::button type="submit" form="authenticate" class="w-full">
        {{ __('filament::login.buttons.submit.label') }}
    </x-filament::button>
    <div class="flex items-center space-x-4">
        <div class="border-t-2 border-slate-600 w-full h-1"></div>
        <h1>Or</h1>
        <div class="border-t-2 border-slate-600 w-full h-1"></div>
    </div>
    <div class="flex space-x-4 items-center justify-evenly">
        // icons from iconify
        <span class="iconify w-5 h-5" data-icon="flat-color-icons:google"></span>
        <span class="iconify w-5 h-5" data-icon="logos:github-icon"></span>
        <span class="iconify w-5 h-5" data-icon="logos:facebook"></span>
    </div>
</form>

Example

Lets make a simple example in which email and password will be auto filled when in local environment. This will help us quickly login in local environment. Open Login.php file and on mount method add the following code.

public function mount(): void
{
    if(env('APP_ENV') === 'local'){
        // fill method is from HasForms interface 
        $this-&gt;form-&gt;fill([
            'email'=&gt; 'fazailalam898@gmail.com',
            'password'=&gt; '12345678',
        ]);
    }else{
        $this-&gt;form-&gt;fill();
    }
}

All right all done, now goto https://localhost:8000/admin/login and check for changes.

How to access .env variables in nuxt3

Fazail Alam — Tue, 05 Jul 2022 00:00:00 +0000

Create .env file

Create .env file in the root directory of your project. Add your necessary variables to it.

Add runtime config

Head over to nuxt.config.ts file. Under defineNuxtConfig, add runtimeConfig object and then public and pass the variables as key and value.

export default defineNuxtConfig({
    runtimeConfig: {
        ...,  // declare private variables here
        public: {
            MODE: process.env.MODE, // this is public 
        }
    }
});

useRuntimeConfig

To access the variables, use useRuntimeConfig() composable from nuxt. There are two properties to access by default. public and app. Since we added our variables in public we can get it from there.

const config = useRuntimeConfig();
console.log(config.public.MODE);
// config.SOME_PRIVATE_VAR

List of useful device related vue composable from Vueuse library.

Fazail Alam — Wed, 29 Jun 2022 00:00:00 +0000

All composable in this list are from Vueuse library. There are many composable in this library.

useBluetooth

This composable helps you to connect and interact with Bluetooth devices with the help of Web Bluetooth API. This gives us 5 variables and 1 function. There are 3 more options you can pass other than acceptAllDevices. Here's full overview of browser compatibility. Official Docs

import { useBluetooth } from "@vueuse/core";

const {
    isSupported, // check if bluetooth is supported
    isConnected, // check if connected, reactive
    device, // device object, reactive
    requestDevice, // function to request device, returns a promise
    server, // handle services, reactive
    error // error helper, reactive
} = useBluetooth({
    acceptAllDevices: true,
    ...
});

useClipboard

This provides the ability to copy , cut and paste text from clipboard. It can asynchronously read and write from system clipboard. This needs user permission for clipboard access. This gives us 3 variables and 1 function, text is reactive and contains the copied text, copy is a function and it accept a text parameter, copied is reactive boolean variable which will reset to false after copy and isSupported is a boolean variable which will be true if clipboard is supported. Official docs

import { useClipboard } from "@vueuse/core";

const source = ref("Initial Text");
const { text, copy, copied, isSupported } = useClipboard({ source });

<template>
    <button @click="copy()">
        <!-- by default, `copied` will be reset in 1.5s -->
        <span v-if="!copied">Copy</span>
        <span v-else>Copied!</span>
    </button>
</template>

useFullscreen

This provides the ability to enter and exit full screen. This gives us 2 variables and 3 function, isFullscreen is a boolean variable which will be true if user is in full screen, enter is a function which will trigger full screen view, exit is a function which will trigger out from full screen, toggle is a function which will toggle full screen and isSupported is a boolean variable which will be true if full screen is supported. You can also pass html element(eg. <video />) to useFullscreen() to make a specified element full screen. Official docs

import { useFullscreen } from "@vueuse/core";

const { isFullscreen, enter, exit, toggle } = useFullscreen();

usePermission

From this composable you can get permission status. Official docs

import { usePermission } from "@vueuse/core";

const microphoneAccess = usePermission("microphone");

useScreenOrientation

Get orientation type(eg. portrait-primary,landscape-secondary,etc), angle of the orientation, lock or unlock orientation. Official docs

import { useScreenOrientation } from "@vueuse/core";

const {
    isSupported, // boolean
    orientation, //orientation type, reactive
    angle, // orientation angle, reactive
    lockOrientation, // lock orientation, accepts orientation type, function
    unlockOrientation, // unlock orientation, function
} = useScreenOrientation();

useDeviceOrientation

This provides the detail of device's physical orientation. Official docs

import { useDeviceOrientation } from "@vueuse/core";

const {
    isAbsolute,
    alpha, // z-axis, range: 0-360
    beta, // x-axis, range: -180 to 180
    gamma, // y-axis, range: -90 to 90
} = useDeviceOrientation();

useWakeLock

This composable make a way to prevent screen from dimming or locking the screen. Official docs

import { useWakeLock } from "@vueuse/core";

const { isSupported, isActive, request, release } = useWakeLock();

useVibrate

This gives you access to vibrate device in the pattern you define. Official docs

import { useVibrate } from "@vueuse/core";

// This vibrates the device for 300 ms
// then pauses for 100 ms before vibrating the device again for another 300 ms:
const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] });

// Start the vibration, it will automatically stop when the pattern is complete:
vibrate();

// But if you want to stop it, you can:
stop();

useBattery

This provides the battery level and charging status. Official docs

import { useBattery } from "@vueuse/core";

const { charging, chargingTime, dischargingTime, level } = useBattery();

useDevicesList

This gives you list of input/output devices. Official docs

import { useDevicesList } from "@vueuse/core";

const {
    devices,
    videoInputs: cameras,
    audioInputs: microphones,
    audioOutputs: speakers,
} = useDevicesList();

useGeolocation

This gives you access to location of the user if they grant permission. Location option like latitude, longitude, speed, heading, etc. Official docs

import { useGeolocation } from "@vueuse/core";

const { coords, locatedAt, error } = useGeolocation();

useIdle

This gives you access to idle status. With below code if you don't interact with screen idle value will become true. Official docs

import { useIdle } from "@vueuse/core";

const { idle, lastActive } = useIdle(5 * 1000); // 5 seconds

console.log(idle.value); // true or false

useNetwork

This gives you access to network status. Status like network type, is online, etc. Official docs

import { useNetwork } from "@vueuse/core";

const {
    isOnline,
    offlineAt,
    downlink,
    downlinkMax,
    effectiveType,
    saveData,
    type,
} = useNetwork();

Create gesture control for flutter video player using chewie.

Fazail Alam — Tue, 28 Jun 2022 15:14:21 +0000

Building controls from scratch can be tricky usually with drag gesture. Here's a guide on how to create gesture like sliding vertical to increase/decrease volume or brightness, double tap to play/pause, fast-forward, fast-rewind and sliding horizontally will change the position of video according to the dragged distance in seconds.

Quickly takes notes in your vuejs dashboard or website.

Fazail Alam — Thu, 28 Apr 2022 09:07:51 +0000

Installation

npm

Use npm to install.

npm i vue-quick-notes

Usage

import { VueQuickNotes } from "vue-quick-notes";

// style import is needed to work propperly
import "vue-quick-notes/dist/style.css";

<VueQuickNotes label="Quick notes" v-model="text" />

Use composable to access text or the open state

Composable

import { useQuickNotes } from "vue-quick-notes";

let { text, open } = useQuickNotes();

console.log(text.value);

console.log(open.value); // Use this value to show or hide quick-note

You can also use ctrl+alt+k to quickly show the notes, easily customize the classes of button,parent element or textarea, take notes by using speech recognition feature.

check here for props, other than those props/attributes will be bind to the text area.

For more info check here

Responsive travel website using tailwindcss & alpinejs | Datepicker | CodeF

Fazail Alam — Wed, 26 Jan 2022 17:47:39 +0000

Hello everyone, here a tutorial how to build responsive website using tailwindcss and alpinejs.

I have modified and used Mithicher datepicker which is available in codepen.

Here's the link to tutorial

Create animated hero section using tailwind css keyframes

Fazail Alam — Tue, 11 Jan 2022 09:20:37 +0000

Hello! In this article i am going to show you how i created this animated hero section using custom key frames in tailwind css.

First i added a parent div with classes

<div class="w-full md:w-1/2 flex justify-center items-center transform scale-75 md:scale-125 translate-x-20 md:translate-x-40 translate-y-0 md:-translate-y-20">
</div>

and then added a img element in the center with classes

<img class="w-80 h-80 rounded-full border-4 border-white custom-shadow" src="./your-img-path.jpg" alt="">
// /app.css
//.custom-shadow{
//     box-shadow:0 0 15px rgba(0,0,0,0.5)
//}

Note: i added custom-shadow class because i wanted the offset of shadow to be (0,0), after that i added the inner circle div with classes

<div class="hw-inner flex justify-between items-center absolute border border-gray-800 rounded-full animate-spin-slow anim-8s">
    <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform -translate-x-5 ">
        <img class="h-9 w-9 object-center animate-rotate-img anim-8s" src="./assets/alpine.png" alt="">
    </div>
    <div class="bg-white overflow-hidden rounded-full custom-shadow h-10 w-10 transform translate-x-5 ">
         <img class="h-10 w-10 object-center animate-rotate-img anim-8s" src="./assets/javascript.png" alt="">
    </div>
</div>

here anim-spin-slow, animate-rotate-img are keyframes for animating the div and img elements, and anim-8s,hw-inner are custom classes for height and width. Inside of inner circle div i added two divs, and then inside those two div a child img element in each, now our inner circle div is ready, after that i added another div inside the parent div which will be our outer circle div with classes

<div class="hw-outer flex justify-between items-center absolute border border-gray-800 rounded-full animate-spin-slow ">
</div>

like from above class here is also a custom class hw-outer for height and width, then i added two divs which are justify-between so that both div are opposite to each other

//First Div
<div class="flex justify-between items-center h-full w-full">
   <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform translate-x-8 translate-y-40 ">
     <img class="h-full w-full object-center animate-rotate-img " src="./assets/flutter.png" alt="">
   </div>
   <div class="bg-white overflow-hidden p-1 rounded-full custom-shadow h-10 w-10 transform -translate-x-8 -translate-y-40 ">
      <img class="h-full w-full object-center animate-rotate-img" src="./assets/svelte.png" alt="">
   </div>
</div>
//Second Div
<div class="absolute flex justify-between items-center h-full w-full">
    <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform translate-x-8 -translate-y-40">
      <img class="h-full w-full object-center animate-rotate-img " src="./assets/tailwindcss.png" alt="">
    </div>
    <div class="bg-white overflow-hidden p-1 rounded-full custom-shadow h-10 w-10 transform -translate-x-8 translate-y-40 ">
       <img class="h-full w-full object-center animate-rotate-img " src="./assets/vuejs.png" alt="">
     </div>
</div>

Note: Second div is absolute, Now open tailwind.config.js file and go to where it says extend, add two keys keyframes and animation.

keyframes: {
'spin-slow': {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
'rotate-img': {
'0%': { transform: 'rotate(0deg)' },
'25%': { transform: 'rotate(-90deg)' },
'50%': { transform: 'rotate(-180deg)' },
'75%': { transform: 'rotate(-270deg)' },
'100%': { transform: 'rotate(-360deg)' },
}
},
animation: {
'spin-slow': 'spin-slow 13s linear infinite',
'rotate-img': 'rotate-img 13s linear infinite',
}

keyframes and animation are self explanatory where you will define your keyframes and name of the keyframe respectively.

https://youtu.be/6VfRp14ceZg

I hope this was helpful to you.