Divider

import React from "react";

const Divider = () => {
  return (
    <div className="mx-auto max-w-screen-xl p-8 text-base dark:text-gray-300">
      <div className="font-medium">Section</div>
      <hr className="my-6 border-t border-gray-200 dark:border-gray-800 shadow-sm" />
      <div className="font-medium">Section</div>
    </div>
  );
};

export default Divider;

import React from "react";

const Divider = () => {
  return (
    <div className="mx-auto text-base max-w-screen-xl p-8 dark:text-gray-300">
      <div className="flex items-center bg-white/50 dark:bg-gray-800/50 rounded-2xl p-6">
        <div className="flex-1 pr-6 font-medium">Section</div>
        <div className="w-px h-12 bg-gradient-to-b from-transparent via-gray-200 dark:via-gray-700 to-transparent"></div>
        <div className="flex-1 pl-6 font-medium">Section</div>
      </div>
    </div>
  );
};

export default Divider;

import React from "react";

const Divider = () => {
  return (
    <div className="mx-auto text-base max-w-screen-xl p-8 dark:text-gray-300">
      <div className="font-medium">Section</div>
      <div className="my-6 flex items-center">
        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-gray-700 to-transparent"></div>
        <div className="mx-4 p-2 rounded-xl bg-white/80 dark:bg-gray-800/80 border border-gray-100 dark:border-gray-700">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            className="h-6 w-6 text-purple-500 dark:text-purple-400"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"
            />
          </svg>
        </div>
        <div className="flex-1 h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-gray-700 to-transparent"></div>
      </div>
      <div className="font-medium">Section</div>
    </div>
  );
};

export default Divider;

import React from "react";

const Divider = () => {
  return (
    <div className="mx-auto text-base max-w-screen-xl p-8 dark:text-gray-300">
      <div className="font-medium">Section</div>
      <div className="relative my-6">
        <div className="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-400 blur-md opacity-50"></div>
        <div className="relative h-0.5 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-400 dark:to-purple-400"></div>
      </div>
      <div className="font-medium">Section</div>
    </div>
  );
};

export default Divider;