Flash

.flash-element {
  animation: flash-anim 1s infinite;
}

@keyframes flash-anim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .flash-element {
    animation: none;
    opacity: 1;
  }
}

Act as a senior CSS developer. Create a "Flash" animation effect that rapidly blinks an element's opacity to grab attention (e.g., for alerts).

Requirements:
1. Use @keyframes to alternate opacity between 1 and 0.3 rapidly (e.g., 0%, 50%, 100%).
2. Apply the animation to a class named .flash-element.
3. Include a @media (prefers-reduced-motion: reduce) query to disable the animation for users who prefer reduced motion.
4. Provide two variants:
   - Vanilla CSS.
   - Tailwind CSS utility classes (using arbitrary values if necessary).
5. Ensure the code is production-ready and accessible.

Output only the code blocks with brief explanations.